jeudi 2 juin 2016

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>

    <li></li>

</ul>

The computed property
<ul>

    <li></li>

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




Aucun commentaire:

Enregistrer un commentaire