Ember.js with multiple Master-Detail Views

Question

As much as I've read, Ember.js currently does not support the notion of having multiple instances of a single controller without enabling the experimental {{control}} helper.

As I understand it, the Ember-y way to do a sorted list is to define a property on the Controller that performs the sort, a la:

App.BarController = Ember.ObjectController.extend({
  beers: (function() {
    return Ember.ArrayProxy.createWithMixins(Ember.SortableMixin, {
      sortProperties: ['rating'],
      content: this.get('content.beers')
    })
  }).property('content.beers')
});

In my application, I'd like to display all of the beers on tap at a bar, and sort those beers by rating. This is done fairly straightforward for one bar using the normal master-detail pattern, given a App.BarController. However, if I want to show two bars side-by-side, suddenly this model breaks. I can't use {{render}} within an {{each}} (since render can only be called once), and the following scenario breaks as well, as the data-bindings are updated to only show the last bar.

{{#each bar in controller}}
  {{#with bar as controller}}
    {{view BarView}}
  {{/with}}
{{/each}}

Finally, I can't just use {{view}} as that removes the ability to sort the data by rating. The view must be bound to a controller, or some other mechanism for sorting.

TL;DR: Given a App.Bar that hasMany instances of App.Beer, using Ember.SortableMixin makes it straightforward to create a sorted list. However, if I want to display two App.Bars at the same time (for comparison), this method breaks as it would require two instances of App.BarController, which is not possible. What is the correct way to get two sorted lists based on the content of two objects of the same class?

Mike Grassotti Mike Grassotti · Accepted Answer · 2013-03-26T07:25:20

What is the correct way to get two sorted lists based on the content of two objects of the same class?

Generally you want to stick to one-controller-per-list. So in this case I would suggest having, say App.LeftBarController and App.RightBarController.

Of course there will be shared code but that can be refactored into a base class or mixin.

Ember.js with multiple Master-Detail Views

1 Answers