Вычисленное свойство Ember.js с зависимостью от элемента свойства массива

Question

Я хочу иметь вычисленное свойство в классе, которое зависит от свойства (массив строк) того же класса. Я хочу, чтобы это вычисляемое свойство зависело только от определенного элемента массива.

На самом деле, я бы не прочь, если это зависит от всех элементов массива.

Я Тлеющей определяется следующим образом:

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> 

Но это не так.

Что еще я пробовал:

1. Я пытался указать зависимость свойства как .property('paneClass').
2. Я пробовал использовать {{bind-attr class=":sf-seg-pane paneClass[0]"}} в шаблоне.
3. Я видел 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

вам нужно использовать сеттер, вы, по сути изменения данных из-под уголек