How to correctly load multiple model on an ember.js view

Question

(Ember 2.14) I have a subview of a product edit route where I want to show the relation to another model (licence). Of course product hasMany licences and licence belongsTo produit. I also have a component to add relations. From what I understand I should load all the data from outside the component in the model function of the route.

WHen I go to the route from somewhere else in the emberApp, it display the correct relations, however when I go directly to the page, only the first licence is displayed as a relation.

Here is the produits.edit.document route's model :

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    const produit = this.modelFor('produits.edit')
    return Ember.RSVP.hash({
      allLicences: this.get('store').findAll('licence'),
      produit: produit
    });
  }
});

The produits.edit route's model :

export default Ember.Route.extend({
  model(params) {
    return this.store.findRecord('produit', params.produit_id);
  }

licence.js :

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr(),
  produits: DS.hasMany('produit'),
  licenceVersions: DS.hasMany('licence/licence-version')
});

produit model :

import Ember from 'ember';
import DS from 'ember-data';
import { modelAction } from 'ember-custom-actions';

export default DS.Model.extend({
  nom: DS.attr(),
  resume: DS.attr(),
  description: DS.attr(),
  description_sec_title: DS.attr(),
  illustration: DS.attr(),
  isPublished: DS.attr('boolean'),
  famille: DS.belongsTo('famille'),
  licences: DS.hasMany('licence'),
  addLicence: modelAction('licences', {method: 'POST'}),
  anyLicence: Ember.computed('licences.[]', function() {
    return this.get('licenses').length > 0;
  })
});

The produits.edit.documents part of the template rendering the licences from the produit.

{{#each model.produit.licences as |licence|}}
        <tr>
          <td>{{licence.name}} </td>
          <td>{{interface/remove-button deleteElement=(action "removeLicence" licence model.produit model.produit.licences)}}</td>
          <td></td>
        </tr>
{{/each}}

In both case, access from the app or whith a reload of the app, ember retrieve the product, and the index of licences. In one case he will show only the first licence of the product, in the other all the correct licence with a relation with the product.

What am I doing wrong in this route model?

EDIT : Right now it can work if

Licences are included in the product(produit) JSON response from the server

OR

the JSON calls to the API are code 200 instead of 304. In both case, the browser tools are identical. It only works with Firefox. Sometimes, the first test fails (200) but it works at the second (304) and fails to the subsequent reload (304)

can you also show the model-definition of licence (especially the part where the relationship is defined) and what the backend/api send you when you directly hit that route? — Jeff
– Jeff, Commented Dec 6, 2017 at 1:03
and - additionally - where and how do you display/get the licences? In a template, in the controller? And how? That all matters.... — Jeff
– Jeff, Commented Dec 6, 2017 at 1:04

Dougui · Accepted Answer · 2017-12-06 19:20:16Z

1

One think you can do is to load relationships synchronously. To do that you can change your relationship like this licences: DS.hasMany('licence', { async: false }). Now you have to include associations when you do a query, like this this.store.findRecord('produit', params.produit_id, { include: 'licences' }). You can load more associations like this, { include: 'licences.licence_versions,famille' }. Check this for more information.

You probably also use {inverse: 'licences'} in your association as you can see here.

answered Dec 6, 2017 at 19:20

Dougui

7,2508 gold badges54 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to correctly load multiple model on an ember.js view

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related