Jack
Jack

Reputation: 7547

Adding model to Backbone.Collection not refreshing view

I am getting started with Backbone and here is my code located on jsfiddler:

http://jsfiddle.net/KZyeV/2/

As you can see on the click of the button I am trying to add vehicle:

 addVehicle: function(){
        console.log(this.collection);
        this.collection.add({Color:'black', Type: 'bicycle'});
        //this.render(); why do I have to again call render? without this it doesn't work.
    }

but for some reason it doesn't update the view unless I call this.render();. Is this the correct way? I've worked with Knockout and this is not how that works. When model is updated the view is updated automatically but for some reason the view is not updating here.

Upvotes: 0

Views: 40

Answers (1)

David Sulc
David Sulc

Reputation: 25994

Simply add:

initialize: function(){            
    this.template = _.template($('#vehicleItemTemplate').html());
    this.collection.bind("reset", this.render, this);
    this.collection.bind("add", this.render, this);
},

Backbone doesn't react to collection changes automatically. If you want that, look into libraries like Marionette.js (which is built on top of Backbone).

Upvotes: 2

Related Questions