Skip to content

Instantly share code, notes, and snippets.

@jgwhite
Created July 14, 2017 14:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jgwhite/aa0f8ad89daab6bc9a5224e752c3139e to your computer and use it in GitHub Desktop.
Save jgwhite/aa0f8ad89daab6bc9a5224e752c3139e to your computer and use it in GitHub Desktop.
didReceiveAttrs vs. didChange
import Ember from 'ember';
export default Ember.Component.extend({
condition: false,
risingEdgeOnly: true,
count: 0,
tagName: '',
didReceiveAttrs() {
this._super(...arguments);
let condition = this.get('condition');
let didChange = condition !== this._prevCondition || !this.get('risingEdgeOnly');
if (condition && didChange) {
this.broadcast();
}
this._prevCondition = condition;
},
broadcast() {
this.incrementProperty('count');
}
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
thing1: { isTrue: true },
thing2: { isTrue: true },
thing3: { isTrue: false },
init() {
this._super(...arguments);
this.set('thing', this.get('thing1'));
}
});
<button onclick={{action (mut thing) thing1}} disabled={{eq thing thing1}}>Thing 1 (isTrue: true)</button>
<button onclick={{action (mut thing) thing2}} disabled={{eq thing thing2}}>Thing 2 (isTrue: true)</button>
<button onclick={{action (mut thing) thing3}} disabled={{eq thing thing3}}>Thing 3 (isTrue: false)</button>
<p>
on didReceiveAttrs:
{{x-beacon condition=thing.isTrue risingEdgeOnly=false}}
</p>
<p>
on risingEdgeOnly:
{{x-beacon condition=thing.isTrue}}
</p>
{
"version": "0.12.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "2.12.0",
"ember-template-compiler": "2.12.0",
"ember-testing": "2.12.0"
},
"addons": {
"ember-data": "2.12.1",
"ember-truth-helpers": "*"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment