Backbone Layout Manager Render list of items

Question

I am new to backbone and backbone layout manager. i am trying to render a list of contacts. here is a snippet of code

var ContactListView = Backbone.Layout.extend({
    tagName: 'li',

    initialize: function (){
        console.log('ContactListView init');
        this.render();
    },

    render: function (){
        console.log('Rendering all items in the contact list');
        _(this.collection.models).each(function (contact){
            var contactlistitem = new ContactListItemView({model: contact});
            self.$el.append(contactlistitem.el);
        });
    }
});

var ContactListItemView = Backbone.Layout.extend({
    initialize: function (){
        this.render();
    },

    render: function (){
        console.log('called');
        var template = Handlebars.compile($('#contact-list-item').html());
        this.el.html(template(this.model));
    }
});

when I navigate to the page the console logs "ContactListView init" but does not output "Rendering all items in the contact list". why is this?

Answer 1

if this.collection is a Backbone.Collection object, then you should use

this.collection.each(function (contact) {
  // work here
});

Your render function will look something like this (inspired by the LayoutManager docs):

beforeRender: function (){
    console.log('Rendering all items in the contact list');
    var self = this;
    this.collection.each(function (contact) {
        var contactlistitem = new ContactListItemView({model: contact});
        self.insertView(contactlistitem);
    });
}

Somewhere else in your code, perhaps in a controller or the router, you will need code like this to create the collection layout:

// Create an instance of the list view.
var layout = new ContactListView();

// Insert into the Document.
layout.$el.appendTo("body");

// Render the View with the contacts collection.
layout.render({ collection: myCollection });