Ember Computed properties and Handlebars templates

Question

In my Ember Controller, I have 2 computed properties (CP) as below;

itemsWithData: function() {
    var dataItems = [];

    return dataItems;
}.property('containsFailure'),
someArray: function() {
    var items = this.get('itemsWithData');
    var someArray = [];

    return someArray;
}.property('itemsWithData')

Now in my Ember Handlerbars template, while I only use someArray CP to iterate on and display values, I am not using the other CP (i.e. itemsWithData)

But if I do not refer itemsWithData in my template, the same is not getting executed in my controller (so even someArray does not execute since it depends on itemsWithData)

It only executes if I explictly add a dummy reference as below;

{{#each itemsWithData as |data|}}
{{/each}}

Is that how CP works in controllers/templates ? I need a way such that I do not have to add this dummy code in my template.

andorov andorov · Accepted Answer · 2015-11-09T12:32:05

Since you are observing an array, it should be property('itemsWithData.[]'). '[]' observes the array for any changes in its set of objects (ie, adding and removing objects), but will not trigger if attributes on those objects changed. See the docs here.

If you wanted to observe a specific attribute of each element in the array, it would be property('[email protected]'), which observes the set of names of each element in itemsWithData. It will also trigger if an element is added or removed. See the docs here.

Properties are computed lazily (while observers are not), so adding itemsWithData to your template is forcing itemsWithData to be computed. If it's not called anywhere else it will not be computed.

Also note that Ember overrides the native array. So if you have Ember.EXTEND_PROTOTYPES or Ember.EXTEND_PROTOTYPES.Array set to false observing an array may not work.

Ember Computed properties and Handlebars templates

1 Answers