Question

我需要在我的Ember.js把手模板中显示方法的结果。根据我的理解，我必须使用计算属性来执行此操作。我遇到的问题是属性依赖于嵌套对象，它在更改/设置时似乎不会触发更改事件，因为我只是更改其内部结构。这是我的情况的简短例子：

App.Foo = Ember.Object.extend({
    prop: {
        fizz: {}
    },

    init: function() {
        var prop = this.get("prop");
        prop.fizz.buzz = "foobar";
        this.set("prop", prop); // This doesn't seem to fire a change event
    },

    handlebarsValue: function() {
        var prop = this.get("prop");
        // ...
        // compute this property from the properties of `prop`
        // ...
        return prop.fizz.buzz;
    }.property("prop")
});

模板：

<p>handlebarsValue: {{model.handlebarsValue}}</p>

有没有办法强制更新计算属性？有一个更好的方法吗？我是否误解了'Ember方式'？

Answer 1

您可以覆盖Ember.Object.set（key，value）方法并通知属性观察者您的属性已更改。

// http://emberjs.com/api/classes/Ember.Object.html#method_set
set: function(key, value) {
  this._super(key, value);

  // Are we updating any nested attributes of our property 'prop'?
  if (key.indexOf('prop.') > -1) {

    // then notify property observers
    this.notifyPropertyChange('prop');
  }
}

JSBin演示：http://emberjs.jsbin.com/zagisona/2/edit

Answer 2

propertyWillChange方法似乎可用于警告Ember更改属性。我仍然不确定这是否是最佳解决方案，但它适用于我的情况。

App.Foo = Ember.Object.extend({
        prop: {
            fizz: {}
        },

        init: function() {
            var prop = this.get("prop");
            this.propertyWillChange("prop");
            prop.fizz.buzz = "foobar";
            this.set("prop", prop); // This doesn't seem to fire a change event
        },

        handlebarsValue: function() {
            var prop = this.get("prop");
            // ...
            // compute this property from the properties of `prop`
            // ...
            return prop.fizz.buzz;
        }.property("prop")
    });

从Ember.js中的嵌套对象计算属性

2 个答案: