Ember.js computed property with dependency on array property's element

Question

I want to have a computed property in a class, that depends on a property (array of strings) of the same class. I want this computed property to depend on a particular element of the array only.

Actually, I would not mind if it depends on all elements of the array either.

I have the ember defined like so:

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'),
}

This computed property is being used in a template like so:

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

This outputs the following html:

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

So far, so good. However, if I now change the value of element paneClass[PANE_1], like so:

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

I was expecting the html to change into:

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

But it doesn't.

What else have I tried:

I've tried specifying the property dependency like .property('paneClass').
I've tried using {{bind-attr class=":sf-seg-pane paneClass[0]"}} in the template.
I've seen this, which outlines a way to get it done when our array is an array of objects. I do not see any example for an array of primitive data types.

Marcio Junior Marcio Junior · Accepted Answer · 2013-12-16T19:06:09

I recommend you to use paneClass.[] instead of paneClass.@each because paneClass.@each is intended to observe some property from an object in the array. Also add the PANE_1 in the property since this is a dependent key.

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'),
}

And to notify the observers that the array changed you need to use array.insertAt(index, content) instead of array[index] = content. In your case:

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

Ember.js computed property with dependency on array property's element

2 Answers