Controller computed property based on model only valid in loop

Question

I have a the following in Ember

Route

model: function() {
  return this.store.findAll('competency');
}

Controller

calendarItems: Ember.computed('model', function() {
  return this.get('model').map(function(competency) {
    return {
      'name': competency.get('title'),
      'start': competency.get('endDate')
    };
  });
})

Template

{{#each model as |item|}}
  {{log calendarItems}}
{{/each}}

{{log calendarItems}}

For some reason unknown to me the {{log calendarItems}} inside the loop displays correctly with all of the store items in the models mapped correctly. But only when the {{log calendarItems}} is not present outside the loop.

When the {{log calendarItems}} is also present outside the loop it causes all 4 log statements to return [] as though the model had nothing to map.

If {{log calendarItems}} is on its own it also returns [].

Am I missing something fundamental about Ember here?

Thanks in advance, Ryan

If you toss a log in the computed property, how many times is it fired and what are the results each time? — Kingpin2k
Called with both in I receive one console output and 4 blank arrays from the log in the template. — RLW
Called with only the log in the loop. Its called once again but the arrays have the corrected mapped information. — RLW
Seems like model is not loaded then the result is cached from the controller property or something. But inside the loop the model is accessed therefore the controller property returns correctly? Does this make any sense? — RLW

Kingpin2k Kingpin2k · Accepted Answer · 2015-09-02T16:00:11

This won't necessarily fix the logging, but it should fix the computed property in that it should update as records become available (if the real problem is that the objects are loading asynchronously, which is kind of my suspicion)

calendarItems: Ember.computed('model.@each.{title,endDate}', function() {
  return this.get('model').map(function(competency) {
    return {
      'name': competency.get('title'),
      'start': competency.get('endDate')
    };
  });
})

Controller computed property based on model only valid in loop

1 Answers