Skip to content

Instantly share code, notes, and snippets.

@jjaffeux
Last active April 24, 2020 12:51
Show Gist options
  • Save jjaffeux/4b41e9103f982c2132515ccc536ddc2e to your computer and use it in GitHub Desktop.
Save jjaffeux/4b41e9103f982c2132515ccc536ddc2e to your computer and use it in GitHub Desktop.
hash creates new object
import Component from "@ember/component";
export default Component.extend({
hashOptionsChanged: Ember.observer("hashOptions.foo", function() {
console.log(
"hashOptions changed",
"guid for hashOptions: " + Ember.guidFor(this.hashOptions),
"guid for hashOptions.foo: " + Ember.guidFor(this.hashOptions.foo)
);
}),
optionChanged: Ember.observer("option", function() {
console.log("option else changed");
}),
didUpdateAttrs() {
this._super(...arguments);
console.log("didUpdateAttrs hashOptions guid: " + Ember.guidFor(this.attrs.hashOptions));
}
});
import Controller from '@ember/controller';
export default class ApplicationController extends Controller {
appName = 'Ember Twiddle';
value = 'default';
}
<h1>Demo that hash helper is creating new object</h1>
<p>
If you change the input and watch the console, you will see that only the observer on the hash param will trigger, direct param won't be trigger. In both cases the observed value is a string which always has the same value. This is also demonstrated by uising `guidFor`.
</p>
<hr>
<p>value: {{value}}</p>
{{my-composer value=value option="baz" hashOptions=(hash foo="bar")}}
{{input value=(readonly value) input=(action (mut value) value="target.value")}}
<p>option: {{@option}}</p>
<p>hashOptions.foo: {{@hashOptions.foo}}</p>
{
"version": "0.17.0",
"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.3.1/jquery.js",
"ember": "3.12.2",
"ember-template-compiler": "3.12.2",
"ember-testing": "3.12.2"
},
"addons": {
"@glimmer/component": "1.0.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment