javascript - Ember.js 在模板中显示具有一个或多个结果的 hasMany 数据

Question

经过无尽的尝试，我希望有人能从我的尝试中找到线索。我知道在 stackoverflow 上有很多关于这个特定主题的问题。但是我想我不会问同样的问题。因为我没有找到我的具体挑战的答案。

这是我的路由器:

App.Router.map(function () {
    this.resource('article', {path: '/article/:id'});
    this.resource('article.new', {path: "/article/new"});
});

路线

App.ArticleRoute = Ember.Route.extend({
    model: function (params) {
        return this.store.find('article', params.id);
    }
});

App.ArticleNewRoute = Ember.Route.extend({
    renderTemplate: function () {
        this.render('article', {
            controller: 'article.new'
        });
    },
    model: function () {
        return this.store.createRecord('article');
    }
});

模型

App.Category = DS.Model.extend({
    name: DS.attr('string'),
    image: DS.attr('string'),
    categoryRelation: DS.belongsTo('category')
});

App.Article = DS.Model.extend({
    name: DS.attr('string'),
    category: DS.hasMany('category')
)};

服务器返回的JSON:

{
   "articles":[
      {
         "id":1,
         "name":"Car 1",
         "category":[1,2],
      {
         "id":2,
         "name":"Car 2",
         "category":2,
   ],

   "categorys":[ // note the added 's' when returning multiple items as per EmberJS convention
      {
         "id":1,
         "name":"Oldtimers"
      },
      {
         "id":2,
         "name":"Classic"
      }
   ],
}

现在是问题，因为我在我的模板中尝试了以下内容:

<script type="text/x-handlebars" data-template-name="article"> 
    <div>
        {{#each category in model}}
            {{category.name}}<br>
            {{name}}<br>
        {{/each}}
    </div>
</script>

我在模板中尝试了多种变体，这是我最后一个看起来正确的代码。注意:对于id为2的文章，如果只有一篇文章，模板也必须渲染。

编辑:我为你们翻译了一些代码。如果有拼写错误，它们可能不在原始代码中。

Answer 1

您的文章模板将只接收一篇文章，因此此 {{#each category in model}} 不起作用，您需要使用 {{#each category in model.category }}:

<div>
    Article {{name}}<br/>
    {{#each category in model.category}}
        Category {{category.name}}<br/>            
    {{/each}}
</div>

这是一个 fiddle Action http://jsfiddle.net/marciojunior/fj26R/