I have a model with a hasMany
.
Thing.A = DS.Model.extend({
bees: DS.hasMany('b', {async: true})});
Thing.B = DS.Model.extend({
colour: DS.attr('number'),
flavour: DS.attr('flavour')});
Thing.A.FIXTURES = [{id: 1, bees: [1, 2, 3]}];
Thing.B.FIXTURES = [
{id: 1, colour: 10, flavour: 100},
{id: 2, colour: 10, flavour: 200},
{id: 3, colour: 20, flavour: 300}];
Thing.ARoute = Ember.Route.extend({
model: function() {return this.store.find('a', 1);}});
and a template
<script type="text/x-handlebars" id="a">
<ul>
{{#each b in model.bees}}
<li>{{b.flavour}}, {{b.colour}}</li>
{{/each}}
</ul>
</script>
which displays:
- 100,10
- 200, 10
- 300, 20
I want to group these by colour, something like:
- 10
- 100,10
- 200, 10
- 20
- 300, 20
If I had the actual data (rather than promises) this would be something like (for the sake of argument):
function groupByColour(bs) {
var grouped = {};
bs.forEach(function(b) {
colour = b.get('colour');
if (grouped[colour]) {
grouped[colour].push(b);
} else {
grouped[colour] = [b];
}
});
return grouped;
}
This is purely for viewing reasons, and the view must be updated when the underlying properties change.
I'm new to Ember, coming from Angular. In Angular I might implement this as a scope.$watch
in the controller, or I might write it as a directive.
In Ember it looks like the data model is more rigid and there are fewer ways to do this (for example, including more than one model would mean the complication of creating a new RSVP model).
This is only a toy example, as simple as possible.
1 - Where is the right place to do this? As a computed property of the model? In the controller? A custom element?
2 - Given that there are promises involved, how would I actually implement this? The computed properties guide glosses over this and only explains how to use built-ins like filterBy
. Can you give me a complete minimal code example?
Thanks!
Aucun commentaire:
Enregistrer un commentaire