Ember.bind不会保持同步

时间:2013-10-01 16:56:49

标签: ember.js

我将在前言中说,我不能只使用Ember(大公司采用广泛采用的模板解决方案,而不是Handlebars,并且不希望重新实现Ember.View)作为一个整体,我只是想使用Ember的一个子集。在这种情况下,我正在使用ember-runtime来尝试利用绑定。问题是这两个对象并不是彼此保持同步。他们应该According to the docs

var App = Ember.Application.create();
App.myObject = Ember.Object.create({
  value: null
});

App.myOtherObject = Ember.Object.create({
  value: 'foo'
});

Ember.bind( App.myObject, 'value', 'App.myOtherObject.value' );

console.log( App.myObject.get('value') ); // foo
console.log( App.myOtherObject.get('value') ); // foo
App.myOtherObject.set('value', 'bar')
console.log( App.myOtherObject.get('value') ); // bar
console.log( App.myObject.get('value') ); //foo

1 个答案:

答案 0 :(得分:2)

这是预期的行为,因为绑定不会立即传播。相反,它将被安排在sync队列中。此同步队列在当前runloop的末尾刷新。

使用绑定,您可以多次更改对象的值,并且不会不必要地传播该值。就一次。

例如sample

App.IndexRoute = Ember.Route.extend({
    afterModel: function() {        
        this.controllerFor('index').someAction();
    }
});

App.IndexController = Ember.Controller.extend({
    minBinding: 'minNumber',
    minNumber: Number.MAX_VALUE,
    someAction: function() {
        var self = this;
        [3,2,3,5,3,6,7,9,4,1].forEach(function(number) {
        if (self.get('minNumber') > number) {          
          self.set('minNumber', number);
        }
      });
    },
    // this observer is called 3 times
    minNumberChanged: function() {
        console.log('minNumberChanged', this.get('minNumber'))
    }.observes('minNumber'),
    // this observer is called once
    minChanged: function() {
        console.log('minChanged', this.get('min'))
    }.observes('min')
});

在您的示例中,您可以使用Ember.run.sync()强制刷新队列。

var App = Ember.Application.create();
App.myObject = Ember.Object.create({
  value: null
});

App.myOtherObject = Ember.Object.create({
  value: 'foo'
});

Ember.bind( App.myObject, 'value', 'App.myOtherObject.value' );

console.log( App.myObject.get('value') ); // foo
console.log( App.myOtherObject.get('value') ); // foo
App.myOtherObject.set('value', 'bar')
Ember.run.sync() // this will force the bindings to be propagated
console.log( App.myOtherObject.get('value') ); // bar
console.log( App.myObject.get('value') ); //bar