Backbone.js render collection in View

Asked By: Anonymous

I have a Backbone Collection that I’m trying to render in the View. The JSON data seems correct, however I can’t access the values from within the view.

Here’s the basic collection:

define(['backbone', 'BaseModel'], function(Backbone, BaseModel) {

    var BaseCollection = Backbone.Collection.extend({

         model: BaseModel,
         url: "/collection/get?json=true",

         initialize: function() {}
    });

    return BaseCollection;

});

Here’s the View:

define(['backbone', 'BaseCollection'], function(Backbone, BaseCollection) {

    var BaseView = Backbone.View.extend({

        el: $('#baseContainer'),
        template: _.template($('#baseTemplate').html()),

        initialize: function() {
            _.bindAll(this);
            this.collection = new BaseCollection();
            this.collection.bind('all', this.render, this);
            this.collection.fetch();
        },
        render: function() {   

            //This returns 3 objects which is correct based on the JSON data being returned from the server
            console.log(this.collection.toJSON());

            var html = this.template(this.collection.toJSON());
            this.$el.html(html);
            return this;
        },

    });

    return BaseView;

});

I think I need to iterate through this.render for each model within the collection. But, I’m not sure, because it shouldn’t ‘render’ until it completes all iterations.

Any suggestions would be great! Thank you!

Solution

Answered By: Anonymous

You need to give your template access to the models via name. When you do this:

var html = this.template(this.collection.toJSON());

You end up passing an array to the template function, which normally expects a context object (name/value pairs). Try this:

var html = this.template({collection: this.collection});

Then in your template you can iterate through them using the collection.each iterator function or any of the underscore utility methods for iteration/filtering/map/etc. I also recommend NOT using toJSON when giving your template access to the collection as it makes your data dumber and harder to work with. toJSON is best left for when you are making HTTP requests.