Ember: 从模板访问多对多数据

Question

我正在努力了解如何从两个相关模型中获取数据以进行显示。

我有一个可以有很多标签的食谱和一个可以有很多食谱的标签：

//models/recipe.js
export default DS.Model.extend({
  name: DS.attr('string'),
  tags: DS.hasMany('tag')
});

//models/tag.js
export default DS.Model.extend({
  name: DS.attr('string'),
  tags: DS.hasMany('recipe')
});

我正在尝试从我的食谱路线（通过组件）做这样的事情：

//templates/components/list-recipes.hbs
<ul>
  {{#each recipes as |recipe|}}
    <li>{{recipe.name}} -  {{#each recipe.tags as |tag|}} {{tag}} {{/each}}</li>
  {{/each}}
</ul>

//templates/recipes.hbs
{{list-recipes recipes=model}}

如果我输出 {{ recipe.tags }} 我得到 <DS.PromiseManyArray>.

我该如何兑现这个承诺？

我尝试将 {include: tags} 添加到我的食谱路线 - 但它似乎没有什么不同：

//routes/recipes.js
export default Route.extend({
  model() {
    return this.get('store').findAll('recipe', {include: 'tags'});
  }
});

我的数据：

提前致谢

Answer 1

您在输出标签时似乎遗漏了名称（即 {{tag.name}}）

这对你有用吗？你拥有的其他一切看起来都不错......

//templates/components/list-recipes.hbs
<ul>
  {{#each recipes as |recipe|}}
    {{! line below updated slightly }}
    <li>{{recipe.name}} -  {{#each recipe.tags as |tag|}} {{tag.name}} {{/each}}</li>
  {{/each}}
</ul>

另外，为了以后的调试目的，您还可以使用{{debugger}}或{{log recipes}}来查找问题所在

Ember: 从模板访问多对多数据

Ember: Accessing many to many data from template

javascript

ember.js

ember-data

ember-cli