模型夹具 ember 加载到模板中

Question

我想以不同的方式更改我的模型。

现在是这样的：

App.Invoice = DS.Model.extend({
  title       : DS.attr('string'),
  quantity    : DS.attr('string'),
  total       : DS.attr('string')
});

App.Invoice.FIXTURES = [
 {
   id: 1,
   title: 'Invoice',
   quantity: null,
   total: null
 }
];

在我的模板中，这是我展示它们的方式

 <td>{{input value=title}}</td>
 <td>{{input value=quantity}}</td>

和

  <p>Title: {{title}}</p>
  <p>Quantity:{{quantity}}</p>

你可以看到here工作

我现在想给出一个不同的结构

App.Invoice = DS.Model.extend({
  title         : DS.attr('string'),
  transactions  : DS.hasMany('transaction')
});

App.Transaction = DS.Model.extend({
  quantity: DS.attr('string'),
  total: DS.attr('string'),
  invoice: DS.belongTo('invoice')
});

App.Invoice.FIXTURES = [
 {
   id: 1,
   title: 'Invoice'
 }
];

App.Transaction.FIXTURES = [
 {
   id:1,
   quantity: '100',
 }
];

问题是我现在如何在我的模板中显示它们？

Here 是我尝试但没有成功的方式

Answer 1

首先，您使用的 Ember-Data 非常旧，beta-2。我已将其更新到当前的 beta 版本 beta-11。

我已将 FIXTURES 更新为当前语法，并添加了与示例数据的关系。我删除了

App.Invoice.reopenClass({
  FIXTURES: [
     {
       id: 1,
       title: 'Invoice',
       transactions: [1]
     }
  ]
});

App.Transaction.reopenClass({
  FIXTURES: [
     {
        id: 1,
        quantity: '100'
     }
    ]
});

你需要在你的路由中获取模型，像这样：

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('invoice');
  }
});

然后您可以在模板中对其进行迭代。不过不要忘记你的主要出口。

<script type="text/x-handlebars">
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
  {{#each model}}
    <h1>{{title}}</h1>
    {{#each transactions}}
      <p>Quantity: {{quantity}}
    {{/each}}
  {{/each}}
</script>

您可以看到一个工作示例here。