EmberJS 绑定不同步？

Question

我正在将我的代码库从 EmberJS-1.0-rc1 升级到 EmberJS-1.0。

我的许多绑定似乎不再一致地同步。语义一定已经改变了，但我不知道该怎么做，或者我应该做什么！

var Widg = Ember.Object.extend({
    init: function () {
        this._super();

        console.log("aliasToValue is: ", this.get('aliasToValue'));
        if (this.get('aliasToValue') != this.get('value')) {
            throw "This exception doesn't get hit...";
        }

        console.log("Setting value to 'hello world'");
        this.set('value', "hello world");

        // I would expect:
        // this.get('value') == this.get('aliasToValue')
        // but that doesn't seem to work anymore....

        console.log("After settting, aliasToValue is: ", this.get('aliasToValue'));
        if (this.get('aliasToValue') != this.get('value')) {
            throw "Ugh, after setting, they don't match";
        }
    },
    value: "initial value",
    aliasToValueBinding: "value"
});

Widg.create(); // EXCEPTION: "Ugh, after setting, they don't match"

Answer 1

当您添加 propertyABinding: propertyB 时，基本上 ember 为 propertyA 和 propertyB 创建一个观察者，用于在 sync 中安排同步（将 propertyA 的值设置为 propertyB，反之亦然）队列。因为该同步是计划好的，所以它将在运行循环结束时执行。所以，aliasToValue 不变：

this.set('value', "hello world");
this.get('value'); // return "hello world"
this.get('aliasToValue'); // return "initial value"

您可以通过调用Ember.run.sync() 以编程方式刷新同步队列。所以这会起作用：

this.set('value', "hello world");
this.get('value'); // return "hello world"
Ember.run.sync();   // don't wait for the end of runloop, and make the sync here
this.get('aliasToValue'); // return "hello world"

但是要在您的示例中进行这项工作，您需要进行一些更改。在您的情况下，您正在设置 init 函数中的属性。但是在 init 函数中，没有触发观察。因此，不会安排同步。您可以在对象初始化时使用on('init') 对其进行更改：

...
didInit: function() {
   // now the observes will trigger when a property change
}.on('init')
...

您更新的代码如下：

//the application
App = Ember.Application.create();

App.MyObject = Ember.Object.extend({
    didInit: function () {

        console.log("aliasToValue is: ", this.get('aliasToValue'));
        if (this.get('aliasToValue') != this.get('value')) {
            alert( "This exception doesn't get hit..." );
        }

        console.log("Setting value to 'hello world'");
        this.set('value', "hello world");

        // I would expect:
        // this.get('value') == this.get('aliasToValue')
        // but that doesn't seem to work anymore....

        console.log("After settting, aliasToValue is: ", this.get('aliasToValue'));
        Ember.run.sync();
        if (this.get('aliasToValue') != this.get('value')) {
            alert( "Ugh, after setting, they don't match" );
        }
    }.on('init'),
    value: "initial value",
    aliasToValueBinding: "value"
});

App.MyObject.create(); // EXCEPTION: "Ugh, after setting, they don't match"

还有 jsfiddle http://jsfiddle.net/marciojunior/Bk7L9/

当然Ember.run.sync() 只是在极少数情况下使用，删除它会使你的模板和属性更新，但是当运行循环完成时。我用它给你看绑定的属性立即更新。

有关运行循环的更多信息，请参阅此答案What is Ember RunLoop and how does it work?