Question

Newbie backbone question:

Context: Building a shopping list with backbone

I have a model class called with name, description and tags (array) properties.
I would like to create two views based on this model or this model’s collection.

First view will display all items like this:

<ul>
<li><h3>Item 1 Name</h3>
<p>Item 1 Description</p>
<p>Tag1, Tag2 ,Tag3</p>
</li>
.......
</ul>

Second view will display a list of tags and count of tagged items like this:

<ul>
<li>Tag1<span>{count of items tagged with tag1}</span></li>
<li>Tag2<span>{count of items tagged with tag2}</span></li>
<li>Tag3<span>{count of items tagged with tag3}</span></li>
</ul>

I built the model, collection and view to support the first view. I would like to know the right way to use the existing model (or create a new model?) to build the second view.

Thanks in advance…

existing Item model and collection (ripped from Todo.js example)

window.Item = Backbone.Model.extend({
// Default attributes for a todo item.
defaults: function() {
return {
order: Items.nextOrder()
};
}
});


window.ItemList = Backbone.Collection.extend({

model: Item,

localStorage: new Store("items"),

nextOrder: function() {
  if (!this.length) return 1;
  return this.last().get('order') + 1;
},

comparator: function(item) {
  return item.get('order');
}

});

UPDATE: Even though the overriding the parse() method works when displaying Tag names with item count, I was unable to refresh tag name/item count list after adding a new item. This may be due to the fact that the views are rendering from different collections. I will try extending the ItemList collection and overriding the parse() method. Any help is greatly appreciated.

Answer 1

Paul Yoder from Backbone.js google group provided the solution.
You can view it here