Ember.js：如何使用ArrayController来描述多个模型？

我正在尝试设置一个仪表板，可以监视和显示多个模型的信息。ArrayController似乎是正确的使用对象，但我不确定我做错了什么

有人能解释一下我在哪里误入歧途吗

jsBin示例：

javascript:

App = Ember.Application.create();

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

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


/* CONTROLLERS */
App.optionsController = Ember.ArrayController.extend({
  legend: 'test',
  len: this.length,
  totalCost: function() {
    return this.reduce( function(prevCost, cost, i, enumerable){
      return prevCost + cost;
    });
  }.property('@each.cost')
});

  <script type="text/x-handlebars" data-template-name="application">
  <p><strong>Ember.js example</strong><br>Using an ArrayController to access aggrigated data for all models of type X.</p>
    {{render dashboard}}
    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="options">
    <h2>Options:</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>
    <p>Why won't this display info about the options below?  I suspect that the optionsController does not actually contain options A-C...</p>
    {{#with App.optionsController}}
    <p>Total number of options (expect 3): {{len}}</p>
    <p>Total cost of options (expect 600): {{totalCost}}</p>
    {{/with}}
  </script>

把手：

App = Ember.Application.create();

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

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


/* CONTROLLERS */
App.optionsController = Ember.ArrayController.extend({
  legend: 'test',
  len: this.length,
  totalCost: function() {
    return this.reduce( function(prevCost, cost, i, enumerable){
      return prevCost + cost;
    });
  }.property('@each.cost')
});

  <script type="text/x-handlebars" data-template-name="application">
  <p><strong>Ember.js example</strong><br>Using an ArrayController to access aggrigated data for all models of type X.</p>
    {{render dashboard}}
    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="options">
    <h2>Options:</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>
    <p>Why won't this display info about the options below?  I suspect that the optionsController does not actually contain options A-C...</p>
    {{#with App.optionsController}}
    <p>Total number of options (expect 3): {{len}}</p>
    <p>Total cost of options (expect 600): {{totalCost}}</p>
    {{/with}}
  </script>

Ember.js示例
使用ArrayController访问X类型所有型号的聚合数据

{{render dashboard}}
{{outlet}}
选项：
{{{#各}
标题：{{Title}}
成本：{{Cost}}{{input value=Cost}}
{{/每个}}
概述：
为什么不显示下面选项的相关信息？我怀疑OptionController实际上不包含选项A-C

{{{带App.optionsController}
选项总数（3个除外）：{{len}

期权的总成本（预计600）：{{totalCost}

{{/与}}

问题的一部分是，即使选项可能不存在，您的仪表板也存在，这可能是您将来要走的路线，这里有一个部分版本可以工作，我将研究另一个版本

使用渲染

---

问题的一部分是，即使选项可能不存在，您的仪表板也存在，这可能是您将来要走的路线，这里有一个部分版本可以工作，我将研究另一个版本

使用渲染

---

在不讨论为什么这样做的情况下，让它正常工作存在一些问题

optionController需要是optionController

仪表板中的活动控制器将是DashboardController（如果未定义，则自动生成），因此您需要打开该控制器并为其提供对选项的引用

在reduce中，第二个参数是一个item引用，因此需要对其执行get（'cost'）

为了让javascript知道您想要整数数学，您需要使用parseInt

这是一个正在工作的jsbin：

---

哈哈，kingpin2k和我最近似乎在为回答余烬的问题而竞争。

没有讨论为什么要这样做，但要让它正常工作有几个问题

optionController需要是optionController

仪表板中的活动控制器将是DashboardController（如果未定义，则自动生成），因此您需要打开该控制器并为其提供对选项的引用

在reduce中，第二个参数是一个item引用，因此需要对其执行get（'cost'）

为了让javascript知道您想要整数数学，您需要使用parseInt

这是一个正在工作的jsbin：

---

哈哈，kingpin2k和我这几天似乎在竞争回答余烬的问题。

这正是我所需要的。看起来我应该能够使用

{{{with App.options controller}}

来访问这些属性，但它看起来很混乱。创建一个“需要”选项控制器的DashboardController更有意义。谢谢这正是我所需要的。看起来我应该能够使用

{{{with App.options controller}}

来访问这些属性，但它看起来很混乱。创建一个“需要”选项控制器的DashboardController更有意义。谢谢@迈克尔·约翰斯顿，谢谢。当你说“为什么这样做”时，你是指你所说的项目，还是指我列出的项目？如果后者，我会更愿意听到更多。我是一个灰烬新手，非常不确定灰烬之路是什么。@michael johnston谢谢。当你说“为什么这样做”时，你是指你所说的项目，还是指我列出的项目？如果是后者，我希望听到更多。我是一个灰烬新手，非常不确定灰烬之路是什么。。