Comparator nesting models in backbone? - backbone.js

Question

If I use a comparator on a backbone collection, would I be able to nest the models that have the same attribute into a div? Examples
// My dummy json
[{name: 'Robert', team: 'Redskins'},{name: 'Aaron', team: 'Packers'},{name: 'Kirk', team: 'Redskins'}]
Then here is my collection.
var Players = Backbone.Collection.extend({
url: 'data/players.json',
comparator : 'team'
});
I see this is cool, because in my rendering view, I see the models are listed in order by teams, example.
<div>
<li>Robert</li>
<li>Redskins</li>
</div>
<div>
<li>Kirk</li>
<li>Redskins</li>
</div>
<div>
<li>Aaron</li>
<li>Packers</li>
</div>
Just in case here is the code for my view.
var Player = Backbone.View.extend({
el: '.app',
render: function() {
var self = this;
var players = new Players();
players.fetch({
success: function(players) {
var template = _.template($('#appTemplate').html(), {players: players.models});
self.$el.html(template);
}
});
}
});
Now to the meat, whats the cleanest way to group the teams into a nest, example below.
<div class="Redskins">
<div>
<li>Robert</li>
<li>Redskins</li>
</div>
<div>
<li>Kirk</li>
<li>Redskins</li>
</div>
</div>
<div class="Packers">
<div>
<li>Aaron</li>
<li>Packers</li>
</div>
</div>

Answer 1

I can't really think of any way to accomplish that without parsing/manipulating your data. You could hijack the toJSON() method or add a new method altogether. For example:
var Players = Backbone.Collection.extend({
url: 'data/players.json',
comparator : 'team',
toJSON: function() {
var team,
index = 0,
grouped = [],
raw = _.clone(this.attributes);
_.each(raw, function(element) {
var thisTeam = element.team;
if (thisTeam != team) { // create new grouping
grouped[index] = {
team: thisTeam,
players: []
}
grouped[index].players.push(element.name);
index++;
} else { // use existing grouping
grouped[index].players.push(element.name);
}
});
return grouped;
}
});
Caveat: this is untested code for illustration only. Anyway, this code will give you some JSON like:
[
{
team: "Packers",
players: ["Aaron"]
},
{
team: "Redskins",
players: ["Robert", "Kirk"]
}
]
Here is a sample Handlebars template:
{{#each this}}
<div class="{{team}}">
<div>
{{#each players}}
<li>{{this}}</li>
{{/each}}
</div>
</div>
{{/each}}