Backbone.js binding collection to models after a fetch using ajax

Question

I'm trying to learn backbone.js and I'm having trouble understanding how to bind models and read them after a fetch. This is my code:

$(function() {
    var Bid = Backbone.Model.extend();

    var BidsList = Backbone.Collection.extend({
        model: Bid,
        url: '/buyers/auction/latestBids?auctionId=26&latestBidId=0',
    });         

    var BidsView = Backbone.View.extend({
        el: $('#bids'),
        initialize: function() {
            log('hi');
            _.bindAll(this, 'render');

            this.collection = new BidsList();                   

            this.collection.fetch();
            this.render();
        },
        render: function() {                    
            log(this.collection);

            return this;
        },              
    });

    var bidsView = new BidsView();

});

function log(m) { console.log(m); }

This is what the webservice json looks like

{
    "AuctionState":3,
    "ClosedOn":null,    
    "Bids":[
        {
            "BidId":132,            
            "AuctionId":26      
        },
        {
            "BidId":131,
            "AuctionId":2           
        }
    ]
}

How do I would I bind that response to the model?

Answer 1

You need to override the parse() method on your BidCollection to pull the Bids out and present them, and them only, to the collection's add() routine. You can do other things with the parse() method to manage the AuctionState field.

You also need to listen for 'change' events in your view, so the view automatically updates after the fetch. You shouldn't need to call render() in your view; you should bind the model's 'change' event to to render(), then fetch the data and let that trigger the render.

As always, Backbone's source code is highly readable. I recommend learning and understanding it.

For example:

var BidsList = Backbone.Collection.extend({
    model: Bid,
    url: '/buyers/auction/latestBids?auctionId=26&latestBidId=0',
    parse: function(response){
        return response.Bids;
    }
});