kmccullough · March 15, 2021 18:51
diff --git a/components.dynamic-page\.js b/components.dynamic-page\.js
 import Component from '@glimmer/component';

 import { inject } from '@ember/service';
 //import { cached } from '@glimmer/tracking';

 export default class extends Component {
  
  @inject pagesService;

  //@cached
  get page() {
    const { location } = this.args;
    console.log('page');
    return location && this.pagesService.fetch(location); 
  }
  
 }
diff --git a/controllers.application\.js b/controllers.application\.js
 import Controller from '@ember/controller';

 export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
 }
diff --git a/helpers.or\.js b/helpers.or\.js
 import { helper } from '@ember/component/helper';

 const TRUE = ' ';
 const FALSE = '';

 export default helper(function or(values/*, hash*/) {
  let v = TRUE;
  const result = values.some(p => v = p) ? v : FALSE;
  console.log('or', !!result, result);
  return result;
 });
diff --git a/services.pages-service\.js b/services.pages-service\.js
 import Service from '@ember/service';

 import ObjectProxy from '@ember/object/proxy';

 export default Service.extend({

  /**
   * @param {string} location
   * @return {ObjectProxy}
   */
  fetch(location) {
    //const response = this.store.query('ui-page', {
    //  [`filter[some-field]`]: location
    //});
    // Some mock behavior to simulate the above actual query
    if (!this.result) {
      const response = new Promise(resolve => setTimeout(() => {
        console.log('resolved');
        resolve(); 
      }, 3000));
      response.firstObject = null;
      console.log('fetch');
      this.result = ObjectProxy.create();

      response.then(() => {
        this.result.set('content', response.firstObject);
      });
    }
    return this.result;
  },
  
 });
diff --git a/templates.application\.hbs b/templates.application\.hbs
 <DynamicPage @location="somewhere"/>
 {{outlet}}
diff --git a/templates.components.dynamic-page\.hbs b/templates.components.dynamic-page\.hbs
 {{if this.page "page" "!page"}}
 {{! `or` evaluates the ObjectProxy as truthy even when the
    content is falsey, so `this.page` is the output, and `if`
    properly evaluates the ObjectProxy as falsey, so "!or" is
    displayed, but even when the ObjectProxy was actually truthy
    before being set to falsey after a delay, the `or` helper is
    not re-called with the now falsy value. The expectation is
    that `or` interprets the ObjectProxy as falsey somehow, same
    as `if` does, and then is called again when it's content is
    set, so that the `or` returns the second argument `true`;
    the following expression should always output "or" since
    there is at least one `true` in the `or` arguments.}}
 {{if (or this.page true) "or" "!or"}}
 {{yield}}
diff --git a/twiddle\.json b/twiddle\.json
 {
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
 }
	import Component from '@glimmer/component';

	import { inject } from '@ember/service';
	//import { cached } from '@glimmer/tracking';

	export default class extends Component {

	@inject pagesService;

	//@cached
	get page() {
	const { location } = this.args;
	console.log('page');
	return location && this.pagesService.fetch(location);
	}

	}
	import Controller from '@ember/controller';

	export default class ApplicationController extends Controller {
	appName = 'Ember Twiddle';
	}
	import { helper } from '@ember/component/helper';

	const TRUE = ' ';
	const FALSE = '';

	export default helper(function or(values/, hash/) {
	let v = TRUE;
	const result = values.some(p => v = p) ? v : FALSE;
	console.log('or', !!result, result);
	return result;
	});
	import Service from '@ember/service';

	import ObjectProxy from '@ember/object/proxy';

	export default Service.extend({

	/**
	* @param {string} location
	* @return {ObjectProxy}
	*/
	fetch(location) {
	//const response = this.store.query('ui-page', {
	// [`filter[some-field]`]: location
	//});
	// Some mock behavior to simulate the above actual query
	if (!this.result) {
	const response = new Promise(resolve => setTimeout(() => {
	console.log('resolved');
	resolve();
	}, 3000));
	response.firstObject = null;
	console.log('fetch');
	this.result = ObjectProxy.create();

	response.then(() => {
	this.result.set('content', response.firstObject);
	});
	}
	return this.result;
	},

	});
	{{if this.page "page" "!page"}}
	{{! `or` evaluates the ObjectProxy as truthy even when the
	content is falsey, so `this.page` is the output, and `if`
	properly evaluates the ObjectProxy as falsey, so "!or" is
	displayed, but even when the ObjectProxy was actually truthy
	before being set to falsey after a delay, the `or` helper is
	not re-called with the now falsy value. The expectation is
	that `or` interprets the ObjectProxy as falsey somehow, same
	as `if` does, and then is called again when it's content is
	set, so that the `or` returns the second argument `true`;
	the following expression should always output "or" since
	there is at least one `true` in the `or` arguments.}}
	{{if (or this.page true) "or" "!or"}}
	{{yield}}
	{
	"version": "0.17.1",
	"EmberENV": {
	"FEATURES": {},
	"_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
	"_APPLICATION_TEMPLATE_WRAPPER": true,
	"_JQUERY_INTEGRATION": true
	},
	"options": {
	"use_pods": false,
	"enable-testing": false
	},
	"dependencies": {
	"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
	"ember": "3.18.1",
	"ember-template-compiler": "3.18.1",
	"ember-testing": "3.18.1"
	},
	"addons": {
	"@glimmer/component": "1.0.0"
	}
	}