如何在ember.js视图上正确加载多个模型

时间:2017-12-05 23:16:37

标签: ember.js ember-data

(Ember 2.14)我有一个产品编辑路线的子视图,我想显示与另一个模型(许可证)的关系。当然是product hasMany licenceslicence belongsTo produit。我还有一个组件来添加关系。根据我的理解,我应该在路径的模型函数中加载组件外部的所有数据。

当我从emberApp中的其他位置前往该路径时,它会显示正确的关系,但是当我直接进入该页面时,只会显示第一个许可证作为关系。

这是produits.edit.document route的模型:

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

produits.edit路线的模型:

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

产品型号:

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

produits.edit.documents模板的一部分,用于从产品中呈现许可证。

{{#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}}

在这两种情况下,从应用程序访问或重新加载应用程序,ember检索产品和许可证索引。在一个案例中,他只会展示产品的第一个许可证,而另一个则是与产品有关系的所有正确许可证。

我在这个路线模型中做错了什么?

编辑: 现在它可以工作,如果

  • 许可证包含在来自服务器的产品(产品)JSON响应中

OR

  • 对API的JSON调用是代码200而不是304.在这两种情况下,浏览器工具都是相同的。它只适用于Firefox。有时,第一次测试失败(200)但是它在第二次测试时工作(304)并且未能到后续重新加载(304)

1 个答案:

答案 0 :(得分:1)

有人认为你可以做的是同步加载关系。为此,您可以像licences: DS.hasMany('licence', { async: false })一样更改您的关系。现在,您必须在执行查询时包含关联,例如this.store.findRecord('produit', params.produit_id, { include: 'licences' })。您可以加载更多此类关联,{ include: 'licences.licence_versions,famille' }。查看this了解详情。

您可能也会在关联中使用{inverse: 'licences'},因为您可以看到here