Question

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

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

我的ember定义如下：

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，它概述了当我们的数组是一个对象数组时完成它的方法。我没有看到任何原始数据类型数组的例子。

Answer 1

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

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");

Answer 2

你需要使用一个setter，你实际上是从ember下改变数据

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

2 个答案: