Ember.js：如何使用ArrayController来描述多个模型？ [英] Ember.js: how to use an ArrayController to describe multiple models?

问题描述

我正在设置一个可以监控和显示多个模型信息的仪表板。 ArrayController看起来像正确的对象使用，但我不知道我做错了什么。

I am trying to set up a dashboard that can monitor and display information on multiple models. The ArrayController seems like the correct object to use, but I am not sure what I am doing wrong.

有人可以解释我在哪里误入歧途吗？

Can someone explain where I've gone astray here?

jsBin示例： http://jsbin.com/IgoJiWi/8/edit?html,js，输出

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>

推荐答案

部分问题是，选项可能不是，这可能是你将来的路线，这里是一个有效的部分版本，我将研究其他版本。

Part of the problem is, your dashboard exists even when the options may not, which might be the route you are going in the future, here's a partial version that works, I'll look into the other version.

http://jsbin.com/ImOJEJej/1/edit

使用渲染

http：/ /jsbin.com/ImOJEJej/3/edit

这篇关于Ember.js：如何使用ArrayController来描述多个模型？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！