Quantcast
Channel: Ember.JS - Latest topics
Viewing all articles
Browse latest Browse all 4828

Computed Properties not working with server data

$
0
0

@andrew8088 wrote:

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);
}
});

Posts: 2

Participants: 2

Read full topic


Viewing all articles
Browse latest Browse all 4828

Trending Articles