javascript - Ember.js:如何表示具有多个模型关系？

Question

我正在尝试设置一个 ember 应用程序，我有很多项目，所有项目都有很多选项。然后我需要一个“仪表板”区域，我可以在其中监控所有项目/选项的信息。

在a previous post我得到了一个仪表板的工作示例，它监视单个项目集合。
我如何更新它以代表每个项目的子选项？

Javascript - from jsBin (updated)

App = Ember.Application.create();

/* ROUTES */
App.Router.map(function() {
  this.resource('items');
  this.resource('dashboard');
});
App.IndexRoute = Ember.Route.extend({
  redirect: function() {
    this.transitionTo('items');
  }
});
App.ItemsRoute = Ember.Route.extend({
  model: function() {
    var a = Em.A();
    a.pushObject( App.Items.create({title: 'A', cost: '100'}));
    a.pushObject( App.Items.create({title: 'B', cost: '200'}));
    a.pushObject( App.Items.create({title: 'C', cost: '300'}));
    return a;
  }
});

/* MODELS */
App.Items = Ember.Object.extend({
  title: '',
  cost: '',
  quantity: ''
});


/* CONTROLLERS */
App.ItemsController = Ember.ArrayController.extend({
  legend: 'test',
  len: function(){
    return this.get('length');
  }.property('length'),
  totalCost: function() {
    return this.reduce( function(prevCost, cost){
      return parseInt(cost.get('cost'),10) + (prevCost || 0);
    });
  }.property('@each.cost')
});
App.DashboardController = Em.Controller.extend({
  needs: ['items'],
  itemsLength: Ember.computed.alias('controllers.items.len'),
  itemsTotalCost: Ember.computed.alias('controllers.items.totalCost')  
});

Handlebars

 <script type="text/x-handlebars" data-template-name="application">
  <p><strong>Ember.js example</strong><br>Using an a dashboard that monitors 'items'.</p>
    {{render dashboard}}
    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="items">
    <h2>Items:</h2>
    <dl>
      {{#each}}
        <dt>Title: {{title}}</dt>
        <dd>Cost: {{cost}} {{input value=cost}}</dd>
      {{/each}}
    </dl>
  </script>

  <script type="text/x-handlebars" data-template-name="dashboard">
    <h2>Overview:</h2>
    {{#if controllers.items}}
    <p>Total number of items (expect 3): {{itemsLength}}<br>
    Total cost of items (expect 600): {{itemsTotalCost}}</p>
    {{/if}}
  </script>

Answer 1

首先，我建议使用客户端记录管理框架，如 ember 数据/ember 模型，它们有点学习曲线，但从长远来看非常棒。如果您不想这样做，您可以遵循您已经建立的模型创建模式。

http://jsbin.com/IpEfOwA/3/edit