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

【问题标题】：Computing properties from nested objects in Ember.js从 Ember.js 中的嵌套对象计算属性
【发布时间】：2014-05-08 17:41:49
【问题描述】：

我需要在我的 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 方式”吗？

【问题讨论】：

标签： javascript ember.js

【解决方案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

【讨论】：

【解决方案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")
    });

【讨论】：