CODEWITHSUNDEEP
javascriptember.jsember-data
Andrew Burgess
Andrew Burgess

Reputation: 1797

Ember Computed Properties not Working with Server Data

I can't figure out why my computed properties aren't working, but it seems to have something to do with fetching the data from the server. When the app fetches the data from the server, the regular property (days) will be displayed properly (see the view below), but the computed property (dates) produces two empty <li>s. However, when I insert the data through this.store.push in the route object's model function (so the data is on the client before the view is rendered), then both properties are properly displayed?

How can I get the computed property to re-compute after the hasMany relationship models are fetched from the server?

The Calendar Model:

import DS from 'ember-data';
import Ember from 'ember';

export default DS.Model.extend({
    name: DS.attr('string'),
    days: DS.hasMany('day'),
    dates: Ember.computed('days.@each', function () {
        return this.get('days').map(day => day.get('date'));
    })
});

The Day Model

import DS from 'ember-data';

export default DS.Model.extend({
    date: DS.attr('string'),
    calendar: DS.belongsTo('calendar')
});

The view

The "regular" property
<ul>
{{#each model.days as |d|}}
    <li>{{d.date}}</li>
{{/each}}
</ul>

The computed property
<ul>
{{#each model.dates as |d|}}
    <li>{{d}}</li>
{{/each}}
</ul>

The data in the route

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    this.store.push({
      "data": [{
        "type":"calendar",
        "id":1,
        "attributes": {
          "id":1,
          "name":"first calendar",
          "days":[2,3],
        },
        "relationships": {
          "days": {
            "data":[
              {"id":2,"type":"day"},
              {"id":3,"type":"day"}
            ]
          }
        }
      }, {
        "type":"day",
        "id":2,
        "attributes":{
          "id":2,
          "calendar":1,
          "date":"2016-06-15"
        }
      }, {
        "type":"day",
        "id":3,
        "attributes":{
          "id":3,
          "calendar":1,
          "date":"2016-06-17"
        }
      }]
    });

    return this.store.findRecord('calendar', 1);
  }
});

Upvotes: 0

Views: 275

Answers (1)

kristjan reinhold
kristjan reinhold

Reputation: 2048

I think your computed property does not work since "days" are async and can't be made to computed property unless you speficy property - as suggested by torzaburo.

Another way out would be to use computed.mapBy:

http://emberjs.com/api/classes/Ember.computed.html#method_mapBy

dates: Ember.computed.mapBy('days', 'date')

there's a way of using PromiseArray

dates: function() {
        return DS.PromiseArray.create({
            promise: Ember.RSVP.all(this.get('days')).then(days => days.mapBy('date'))                     
       });     
}.property('days.[]'),

Upvotes: 1

Related Questions