Defining an Ember computed property based on an array of properties

Question

I am trying to define a computed property that depends upon a set of properties, which are specified as an array. The example is given in this fiddle:

var MyObject = Ember.Object.extend({
    properties: ['red', 'blue'],

    red: 'i am red',
    blue: 'blue am i',

    defineMagic: function () {
        var thiz = this;

        Ember.defineProperty(thiz, 'magic', Ember.computed(function () {
           console.log('i am called');
            return thiz.getProperties(thiz.get('properties'));
       }).property(thiz.get('properties').toString()/*what goes here */));
   }
});

So far, I have used Ember's defineProperty method to define a computed property. But the computed property does not get recomputed if the underlying properties change, as noted in the comments in the fiddle. Be sure to activate console, as I am trying to validate against the console output.

Is this possible at all in Ember, and if so; how to use it?

Christopher Swasey Christopher Swasey · Accepted Answer · 2013-11-28T03:23:05

You can do this with the magic of Function#apply. apply calls a function by translating the passed array into an arguments list. (Function#call, on the other hand, takes a normal comma separated list of arguments). Try this:

var func = function () { return this.get('properties'); };
var args = this.get('properties').concat([func]);

Ember.defineProperty(this, 'magic', Ember.computed.apply(this, args));

This is equivalent to

Ember.defineProperty(this, 'magic', Ember.computed('red', 'blue', func));

Also: in a computed property this refers to the object of which it is a property, so you don't want to be referencing that/thiz etc to get to the object.

Defining an Ember computed property based on an array of properties

1 Answers