lundi 25 janvier 2016

Ember: Access sideloaded model relationship data in template

I am trying to display a model's relationships in a template from sideloaded data, but there seems to be some problem. With Ember Inspector, I see that the relationships are correctly loaded from the data. However, the data is not displayed on the page.

Looking for solutions or suggestions on where to start debugging. Much appreciated.

Handlebars:

<dt>Categories</dt>
<dd>
  <ul>
    {{#each model.categories as |category| }}
      <li>{{ category.name }}</li>
    {{/each}}
  </ul>
</dd>

The route:

export default Ember.Route.extend(AuthenticatedRouteMixin, {
  model(params) {
    return this.store.findRecord('datasheet', params.id);
  }
});

The models:

// app/models/datasheet.js
export default DS.Model.extend({
  name: DS.attr('string'),
  name_en: DS.attr('string'),
  news: DS.attr('string'),
  news_en: DS.attr('string'),
  basic_information: DS.attr('string'),
  basic_information_en: DS.attr('string'),
  id_gradient_default: DS.attr('string'),
  icon_name: DS.attr('string'),
  icon_color: DS.attr('string'),
  order: DS.attr('string'),
  item_count: DS.attr('string'),

  categories: DS.hasMany('category')
});

// app/models/category.js
export default DS.Model.extend({
  name: DS.attr('string')
});

This is the JSON returned from the adapter method:

{
    "data": {
        "type": "datasheet",
        "id": "21",
        "attributes": {
            "name": "Projekty",
            "name_en": "Projects",
            "news": "",
            "news_en": "",
            "basic_information": "",
            "basic_information_en": "",
            "id_gradient_default": "27",
            "icon_name": "pin_flag",
            "icon_color": "",
            "order": "14"
        },
        "relationships": {
            "categories": ["18", "19", "20", "51", "52"]
        }
    },
    "included": [{
        "type": "category",
        "id": "18",
        "attributes": {
            "name": "Project"
        }
    }, {
        "type": "category",
        "id": "19",
        "attributes": {
            "name": "Activity"
        }
    }, {
        "type": "category",
        "id": "20",
        "attributes": {
            "name": "Project phase"
        }
    }, {
        "type": "category",
        "id": "51",
        "attributes": {
            "name": "Program"
        }
    }, {
        "type": "category",
        "id": "52",
        "attributes": {
            "name": "Milestone"
        }
    }]
}

Ember Inspector screenshot: enter image description here




Aucun commentaire:

Enregistrer un commentaire