Ember.js 计算属性依赖于数组属性的元素答案

【问题标题】：Ember.js computed property with dependency on array property's elementEmber.js 计算属性依赖于数组属性的元素
【发布时间】：2013-12-16 18:21:53
【问题描述】：

我想在一个类中有一个计算属性，它依赖于同一类的一个属性（字符串数组）。我希望这个计算属性仅依赖于数组的特定元素。

实际上，我也不介意它是否依赖于数组的所有元素。

我有这样定义的余烬：

var UpdateController = Ember.ArrayController.extend({

    PANE_1:     0,
    PANE_2:     1,
    PANE_3:     2,

    init: function() {
        this._super();
        this.set('paneClass', ["center", "right", "right"]);
    },

    channelsPaneClass: function() {
         return this.get('paneClass')[this.get('PANE_1')];
    }.property('paneClass.@each'),
}

这个计算属性被用在一个模板中，如下所示：

<div {{bind-attr class=":sf-seg-pane channelsPaneClass"}}></div>

这会输出以下 html：

<div class="sf-seg-pane center"></div>

到目前为止，一切都很好。但是，如果我现在更改元素 paneClass[PANE_1] 的值，如下所示：

this.get('paneClass')[this.get('PANE_1')] = "xxx";

我期待 html 变成：

<div class="sf-seg-pane xxx"></div>

但事实并非如此。

我还尝试了什么：

我已尝试指定属性依赖项，例如 .property('paneClass')。
我尝试在模板中使用{{bind-attr class=":sf-seg-pane paneClass[0]"}}。
我见过this，它概述了当我们的数组是对象数组时完成它的方法。我没有看到任何原始数据类型数组的示例。

【问题讨论】：

标签： ember.js

【解决方案1】：

我建议您使用paneClass.[] 而不是paneClass.@each，因为paneClass.@each 旨在观察数组中对象的某些属性。还要在property 中添加PANE_1，因为这是一个依赖键。

var UpdateController = Ember.ArrayController.extend({
    PANE_1:     0,
    PANE_2:     1,
    PANE_3:     2,
    init: function() {
        this._super();
        this.set('paneClass', ["center", "right", "right"]);
    },
    channelsPaneClass: function() {
         return this.get('paneClass')[this.get('pane1')];
    }.property('paneClass.[]', 'PANE_1'),
}

并且要通知观察者数组已更改，您需要使用array.insertAt(index, content) 而不是array[index] = content。在你的情况下：

this.get('paneClass').insertAt(this.get('PANE_1'), "xxx");

【讨论】：

像魅力一样工作！谢谢你的时间。如果您不介意，这是否记录在某处。我已经在谷歌上搜索了几个小时。最后，我使用了涉及此处概述的对象的解决方法：emberjs.com/guides/object-model/…
不客气。关于insertAt，我唯一知道的地方是documentation。
对不起，我的意思是paneClass.[] 语法。
没问题。 This 是 @each 的文档

【解决方案2】：

您需要使用 setter，您实际上是在 ember 下更改数据

【讨论】：

如何为数组元素使用setter？如果它是一个对象，我会使用 this.set('paneClass', "xxx")。但是paneClass 是一个数组，我想将它的第 0 个元素设置为“xxx”。