Skip to content

Instantly share code, notes, and snippets.

@Serabe
Forked from nightire/components.data-binding.js
Created February 25, 2018 11:18
Show Gist options
  • Save Serabe/16069898d907f821b9552b310322c8a4 to your computer and use it in GitHub Desktop.
Save Serabe/16069898d907f821b9552b310322c8a4 to your computer and use it in GitHub Desktop.
possible bug about one way binding
import Ember from 'ember';
function logLifeCicle(name) {
return function() {
console.log(name, arguments);
};
}
export default Ember.Component.extend({
bar: 0,
didUpdateAttrs: logLifeCicle('didUpdateAttrs'),
didReceiveAttrs: logLifeCicle('didReceiveAttrs'),
actions: {
change() {
// if comment out this line, mutation will be updated in template properly
this.toggleProperty('foo');
this.set('bar', Math.random());
console.log(this.get('bar'));
}
}
});
import Ember from 'ember';
export default Ember.Controller.extend({
foo: true,
bar: 0
});
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return false;
}
});
Foo: {{foo}}
<br>
Bar: {{bar}}
<hr>
<p>
when have both two-way binding and one-way binding, <br>
the one-way binding value will not display properly in template, <br>
but if you open console, you will find it actually been mutated.
</p>
{{data-binding foo=foo bar=(readonly bar)}}
<p>have both two-way or both one-way doesn't have any problem:</p>
{{data-binding foo=foo bar=bar}}
<br>
{{data-binding foo=(readonly foo) bar=(readonly bar)}}
<button type="button" onclick={{action "change"}}>
Foo: {{foo}} - Bar: {{bar}}
</button>
{
"version": "0.13.0",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "release",
"ember-template-compiler": "release",
"ember-testing": "release"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment