Question

I was putting up a sample code for one of questions here on and i stumbled with this problem. I definitively know something simple is missing but can’t reason out what. Rendering a simple collection does not show in the DOM but does during debugging in the console.Code is bit long(verbose) so did not want to replicate here. Have a jsfiddle please see that

JsFiddle

http://jsfiddle.net/zRSg3/2/

The views look like this:

/*Provides visual display of category*/
var categoryView = Backbone.View.extend({
    tagName: "div",
    template:_.template($("#categoryView").html()),
    className: "category-view",
    initialize: function() {
    },
    render: function() {
        $(this.el).empty().html(this.template(this.model.toJSON()));
        return this;
    }    
});

/*visual display of how categories looks*/
var categoriesView = Backbone.View.extend({
    el: "#accordian",
    render: function() {    
        this.collection.each(this.renderEach,this);
        return this;
    },
    renderEach: function(mod,index,arr) {
        $(this.el).empty().append(new categoryView({model:mod}).render().el);
    },
    events: {
        "load": "initAccordian"
    },
    initAccordian: function() {

    }
});

and they’re rendered like this:

var userCategoriesView = new categoriesView({collection:userCategories});
userCategoriesView.render();​

Answer 1

Your first problem is that you can’t spell “accordion” (but neither can I so don’t feel too bad):

el: "#accordian",

should be:

el: "#accordion",

Your next problem is that renderEach is clearing out all the HTML on each step through your collection so you’ll end up with only the last element rendered:

renderEach: function(mod,index,arr) {
    $(this.el).empty().append(new categoryView({model:mod}).render().el);
},

Drop the empty() call:

renderEach: function(mod,index,arr) {
    $(this.el).append(new categoryView({model:mod}).render().el);
},

Another problem you’ll have is that there is no load even on your #accordion so this:

events: {
    "load": "initAccordian"
},

won’t do anything. You’ll have to call initAccordian yourself (and you’ll probably want to fix the spelling too); if you need to wait until the browser has control again before initAccordion is called then you could use a setTimeout with a time of zero:

render: function() {
    var that = this;
    this.collection.each(this.renderEach,this);
    setTimeout(function() { that.initAccordion() }, 0);
    return this;
}

This “timeout of zero” hack is useful if you need the browser to get everything positioned and sized before you can finish your work.

Also, newer versions of Backbone provide a jQuery-ified version of this.el in this.$el in your views so you don’t need to $(this.el).

Here’s a cleaned up version of your fiddle: http://jsfiddle.net/ambiguous/EMMrD/