Ember data binding

Like other frameworks, Ember its own way of binding data, and can use binding on any object. However, data binding is mostly used in the Ember and it is easier for developers to use compute properties.

Two-way binding

// 双向绑定
Wife = Ember.Object.extend({
  householdIncome: 800
});
var wife = Wife.create();
Hasband = Ember.Object.extend({
  //  使用 alias方法实现绑定
  householdIncome: Ember.computed.alias('wife.householdIncome')
});
hasband = Hasband.create({
  wife: wife
});
console.log('householdIncome = ' + hasband.get('householdIncome'));  //  output > 800
// 可以双向设置值
//  在wife方设置值
wife.set('householdIncome', 1000);
console.log('householdIncome = ' + hasband.get('householdIncome'));  // output > 1000
// 在hasband方设置值
hasband.set('householdIncome', 10);
console.log('wife householdIncome = ' + wife.get('householdIncome'));

It is important to note that the binding does not immediately update the corresponding value, Ember waits until the program code is finished running and before the synchronization changes, so you can change the value of the calculated property several times. Because binding is short,there is no need to worry about overhead.

One-way binding

One-way binding only propagates changes in one direction. One-way binding is performance-optimized relative to two-way binding, and for two-way binding, if you just set the association in one direction, it's actually a one-way binding.

var user = Ember.Object.create({
  fullName: 'Kara Gates'
});
UserComponent = Ember.Component.extend({
  userName: Ember.computed.oneWay('user.fullName')
});
userComponent = UserComponent.create({
  user: user
});
console.log('fullName = ' + user.get('fullName'));
// 从user可以设置
user.set('fullName', "krang Gates");
console.log('component>> ' + userComponent.get('userName'));
// UserComponent 设置值，user并不能获取，因为是单向的绑定
userComponent.set('fullName', "ubuntuvim");
console.log('user >>> ' + user.get('fullName'));

There are not many knowledge points about data binding, relatively not the focus, after all, the association between objects is less, the simpler the better. M ore correlations are difficult to maintain.
The full code of the blog post is placed in Github (the blog post has been modified several times, and the code on the blog post may be different from the github code, but the impact is small!). I f you think the blog post is a bit of a github project for you, give me star Yours is definitely the biggest motivation for me!!