Question

I have a view that render itself from a Collection:

render: function() {

    $(this.el).html(JST['templates/menu']({collection: this.collection }));
    $('#nav').html(this.el);     
}

In the view initializer, i bind the add event of the collection on the render function of the view:

initialize: function() {
    this.render();
    var self = this;
    this.collection.bind("add", function(event){
        self.render();
    });
}

elsewhere in the application, I add an item to the collection.

bookSubscription_collection.add(model);

The problem with that code is, if I add a new item to the collection, then all the items in the collection are re-rendered.

Is there a way to add a new item to a collection without re-render all the other items, but just render the new item?

Answer 1

Instead of binding the collection’s add event to the render function, bind it to some other function that accepts the model that was added, and modifies the DOM with data from the model that was added.