模型夹具余烬加载到模板中

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>

你可以看到这里的工作

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

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',
 }
];

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

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

Answer 1

首先，你正在使用的Ember-Data真的很老，beta-2。我已将其更新为当前的测试版 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>

您可以在此处查看一个工作示例。