Ember.bind不保持同步 [英] Ember.bind does not stay in sync

问题描述

我将以这样的方式说，我不能仅仅使用Ember（大公司，广泛采用的模板化解决方案，而不是Handlebars，并且不希望重新实现Ember.View），我只想使用Ember的一个子集。在这种情况下，我使用ember-runtime尝试利用绑定。问题是这两个对象并没有保持同步。 根据文档，他们应该是。

  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 
  

解决方案

这是预期的行为，因为绑定不会立即传播。相反，它将被安排在同步队列中。而这个同步队列在当前的运行循环结束时被刷新。

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

例如，示例：

  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观察者被称为3次
 minNumberChanged：function（）{
 console.log（'minNumberChanged'，this.get（'minNumber'））
} .observes（'minNumber'），
 //这个观察者被调用一次
 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（）//这将强制绑定传播
 console.log（ App.myOtherObject.get（'value'））; // bar 
 console.log（App.myObject.get（'value'））; // bar 
  

I will preface this with saying that I can not just use Ember ( big company with widely adopted templating solution that is not Handlebars and do not wish to re-implement the Ember.View ) as a whole and I just want to use a sub-set of Ember. In this case I'm using ember-runtime to try to take advantage of bindings. The problem is that these 2 objects are not staying in sync with each other. According to the docs they should be.

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

解决方案

This is the expected behavior, because the bindings isn't propagated immediately. Instead it will be scheduled in the sync queue. And this sync queue is flushed in the end of the current runloop.

Using bindings, you can change the value of an object several times, and the value will not be propagated unnecessarily. Just once.

For example in that 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')
});

In your sample you can force the queue to be flushed using 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

这篇关于Ember.bind不保持同步的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！