no existant $(this.el) in backbone view while rendering child view

Question

full code here... http://pastebin.com/EEnm8vi3

line 378 is not inserting the sections into the current view. the section model is correctly being passed into the method. everything else works as expected except for the insertion of the child rendered views.

I am wanting to know why $(this.el) is empty and therefore not allowing an append. trying to use a direct selector like $('#sections') also does not work.

relevent code repeated from pastbin link above: (addOne method)

SCC.Views.SectionView = Backbone.View.extend({
    tagName: "div",
    className: "section",
    initialize: function(){
        _.bindAll(this, 'render');
        this.template = _.template($('#section-tmpl').html());
    },
    render: function() {
        console.log($(this.el));
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    }
});



SCC.Views.SectionsView = Backbone.View.extend({
    tagName: "div",
    id: "sections",
    className: "sections",
    initialize: function(){
        _.bindAll(this, 'render');
         //SCC.Sections.bind('add',   this.addOne, this);
         SCC.Sections.bind('reset', this.addAll, this);
         SCC.Sections.bind('all',   this.render, this);
    },
    render: function() {
        $(this.el).html("<p>rendered</p>");
        return this;
    },
    addOne: function(section) {
        var view = new SCC.Views.SectionView({model: section});
        $(this.el).append(view.render().el);
    },
    addAll: function() {
        this.collection.each(this.addOne);
    }

});



SCC.Sections = new SCC.Collections.Sections();
SCC.SectionsView = new SCC.Views.SectionsView({collection:SCC.Sections});
SCC.Sections.reset(window.SectionData);
$('#main').append(SCC.SectionsView.render().el);

Try adding addOne and addAll to the _.bindAll(this, ... ) function. I think why it may be failing it because "this" for addAll is not the BackboneView, until you've bound it. — Bartek
i think that did it!!!!! also got rid of $(this.el).html("<p>rendered</p>"); which i think helped? — lukemh
Instead of writing $(this.el), which means you are casting your element to jQuery many times, you should just use this.$el. It's built into Backbone for convenience and efficiency. — Micros

c4urself c4urself · Accepted Answer · 2011-12-20T09:27:44

I ran into this problem myself and so I'll leave this answer for anyone else out there:

When you bind this.render to 'all' as @lukemh did:

SCC.Sections.bind('all', this.render, this);

You're effectively saying everytime an event is triggered in the model/collection re-render the view. When you use .html() in that render method you're also going to override any child views that may have been .append()'ed to it throught the addOne function.

If you move the $(this.el).html() call to the initialize view the problem is solved. You can still bind render to 'all' but make sure you're only re-rendering a portion of it or else you'll override the child views again.

no existant $(this.el) in backbone view while rendering child view

1 Answers