CODEWITHSUNDEEP
ember.jsember-data
Syl
Syl

Reputation: 3829

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

(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

OR

Upvotes: 0

Views: 159

Answers (1)

Dougui
Dougui

Reputation: 7230

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.

Upvotes: 1

Related Questions