Ember.js: how to use an ArrayController to describe multiple models?

问题

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 Example: http://jsbin.com/IgoJiWi/8/edit?html,js,output

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')
});

handlebars:

  <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>

回答1:

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

Using render

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

回答2:

Without getting into the why of doing things this way, there were a couple problems with making it just work.

optionsController needs to be OptionsController
the active controller in the dashboard will be DashboardController (autogenerated if not defined) so you need to open that and give it a reference to options
in reduce, the second argument is an item reference, so you need to do get('cost') on it
in order for javascript to know you want integer math, you need to use parseInt

This is a working jsbin: http://jsbin.com/acazAjeW/1/edit

lol, kingpin2k and I seem to be competing for answering ember questions these days.

来源：https://stackoverflow.com/questions/20056283/ember-js-how-to-use-an-arraycontroller-to-describe-multiple-models

标签

ember.js

handlebars.js