Ember.js Bindings Tutorial

Question

According to the Ember guide this snippet should set the houseHoldIncome property of the App.wife instance.

App.wife = Ember.Object.create({
    householdIncome: 80000
});

App.husband = Ember.Object.create({
    householdIncomeBinding: 'App.wife.householdIncome'
});

App.husband.get('householdIncome'); // 80000

// Someone gets raise.
App.husband.set('householdIncome', 90000);
console.log(App.wife.get('householdIncome')); // 90000

console.log(App.wife.get('householdIncome')) still outputs 80000. Is this due bindings aren't updated immediatly or am I doing something wrong?

Edit:
It appears that bindings aren't updated immediatly.

App.wife.addObserver('householdIncome', function() {
    console.log('Wife income changed: '+App.wife.get('householdIncome'));
});

This will output the updated income.

Answer 1

This is the expected behavior because ember queue some changes using a lib called backburner . The advantage of this is that several changes in a model atribute, for example in a foreach, will just render one time. So you don't need to care about performance, in observers and dom updating.

If you use Ember.run.sync() you can force the binding to flush so you will see the changes being propagated:

App.wife = Ember.Object.create({
    householdIncome: 80000
});

App.husband = Ember.Object.create({
    householdIncomeBinding: 'App.wife.householdIncome'
});

App.husband.get('householdIncome'); // 80000

// Someone gets raise.
App.husband.set('householdIncome', 90000);
Ember.run.sync();
console.log(App.wife.get('householdIncome')); // 90000

In that fiddle you will see the wife householdIncome property being updated http://jsfiddle.net/marciojunior/uCr3C/