ember.js - {{lineItem.product.name}} 不呈现产品名称

Question

一个Invoice hasMany lineItems和lineItem belongsTo一个Product。

我想迭代发票的所有 lineItems 并使用产品名称呈现一个表格：

<script type="text/x-handlebars" data-template-name="invoice">
  <h1>Invoice #{{number}}</h1>
  <table>
  <tr><th>Amount</th><th>Product</th></tr>
  {{#each lineItem in lineItems}}
    <tr>
      <td>{{lineItem.amount}}</td>
      <td>{{lineItem.product.name}}</td>
    </tr>
  {{/each}}
  </table>
</script>

但{{lineItem.product.name}}不起作用。我该如何编码？

我的app.js：

App = Ember.Application.create();

// Router
App.Router.map(function() {
  this.resource('invoice', { path: '/' });
});

App.InvoiceRoute = Ember.Route.extend({
  model: function() {
    return App.Invoice.find(1);
  }
});

// Models
App.Store = DS.Store.extend({
  revision: 11,
  adapter: 'DS.FixtureAdapter'
});

App.Invoice = DS.Model.extend({
  number: DS.attr('string'),
  lineItems: DS.hasMany('App.LineItem')
});

App.LineItem = DS.Model.extend({
  amount:  DS.attr('number'),
  invoice: DS.belongsTo('App.Invoice'),
  product: DS.belongsTo('App.Product')
});

App.Product = DS.Model.extend({
  name:  DS.attr('string'),
  lineItems: DS.hasMany('App.LineItem')
});

App.Invoice.FIXTURES = [{
  id: 1,
  number: '0001',
  lineItems: [1, 2]
}];

App.LineItem.FIXTURES = [{
  id: 1,
  invoice_id: 1,
  product_id: 1,
  amount: '2'
}, {
  id: 2,
  invoice_id: 1,
  product_id: 2,
  amount: '1'
}];

App.Product.FIXTURES = [{
  id: 1,
  name: 'Apple',
  lineItems: [1]
}, {
  id: 2,
  name: 'Orange',
  lineItems: [2]
}];

Answer 1

固定装置是错误的。在 LineItem 的定义中，它必须是 product 而不是 product_id。这是固定代码：

App.LineItem.FIXTURES = [{
  id: 1,
  invoice: 1,
  product: 1,
  amount: '2'
}, {
  id: 2,
  invoice: 1,
  product: 2,
  amount: '1'
}];