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

Question

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>

Michael Johnston · Accepted Answer · 2013-11-18 20:17:34Z

3

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.

answered Nov 18, 2013 at 20:17

Michael Johnston

5,3301 gold badge33 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

doub1ejack Over a year ago

@michael-johnston Thanks. When you say 'the why of doing things this way', are you referring to the items you stated, or the things as I laid them out? If the latter, I would love to hear more. I am an Ember newbie and very uncertain of what the Ember way is..

Kingpin2k · Accepted Answer · 2013-11-18 20:09:10Z

2

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

edited Nov 18, 2013 at 20:09

answered Nov 18, 2013 at 20:03

Kingpin2k

47.4k10 gold badges80 silver badges97 bronze badges

1 Comment

doub1ejack Over a year ago

That was just what I needed. It seemed like I should be able to use {{#with App.OptionsController}} to access those properties, but it seemed messy. Creating a DashboadController that 'needs' the OptionsController makes much more sense. Thanks!

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related