Question

I’m building my first web app using Backbone.js. So far so good. I’m looking for a little guidance:

I have a <ul> that I want to populate with <li> that represent ‘products’

This is what I’ve defined so far:

• 1 model -> product
• 1 collection -> products
• 1 view -> view_product (view that represents a single product — one <li>)

I’ve created an instance of the collection by passing it an array of objects that represent my products, I understand this creates instances of the model for each product inside the collection.

I’m confused about what to do next.
Should I loop over the collection with _.each(), create and instance of view_product for each model in products and then try to append them to my <ul>? Something tells me that’s the wrong idea.

Answer 1

I’ve created an instance of the collection by passing it an array of objects that represent my products, I understand this creates instances of the model for each product inside the collection.

You understand correctly.

You’ll probably want to add one more view for the collection of products, this view would be a <ul> and it would manage the per-product views (which are <li>s):

var V = Backbone.View.extend({
    tagName: 'ul',
    initialize: function() {
        _.bindAll(this, 'render');
        this.collection.on('reset', this.render);
        // And other events as needed...
    },
    render: function() {
        var _this = this;
        this.collection.each(function(p) {
            var v = new view_product({ model: p });
            _this.$el.append(v.render().el);
        });
        return this;
    }
});

Collections already have many Underscore methods mixed in so you don’t need to _.each(collection.models, ...), collection.each(...) works just as well and is more idiomatic.

Then you’d instantiate and render one of your per-collection views:

var v = new V({ collection: your_existing_products_collection });
$(some_container).append(v.render().el);

Backbone treats collection options to views specially, that’s where this.collection comes from in initialize.

The per-product views would take care of binding to the product’s events (such as name, price, quantity, … changes) and would take care of adding/removing products from the person’s cart. The per-collection view is responsible for anything involving the collection as a whole: collection resets, new products are added, products are removed, …

Here’s a quick’n’dirty demo to help illustrate what I’m talking about: http://jsfiddle.net/ambiguous/SSstN/1/