Backbone div not being repainted

Question

I am using a Router for my navigation and layout management (is that right!?) and seem to have a hit a problem:

backboneQuote.Routers.ApplicationRouter = Backbone.Router.extend({

routes: {
    "" : "home",
    "edit/:id": "quoteEdit"
},

initialize: function(){
    this.headerView = new backboneQuote.Views.headerView();
    $('.header').html(this.headerView.render().el);

    if(!this.itemsView){
        this.items = new backboneQuote.Collections.ApplicationCollection([
            {id: 1, name: "item 1"},
            {id: 2, name: "item 2"},
            {id: 3, name: "item 3"}
        ]);

        this.itemsView = new backboneQuote.Views.itemsView({collection: this.items});
    }
    this.content = $('.container');
},

home: function(){

    this.content.html(this.itemsView.render());

},

quoteEdit: function(id){
    this.editQuoteView = new backboneQuote.Views.editQuoteView({model: this.items.where({id: parseInt(id, 10)})});
    $('#editQuote').html(this.editQuoteView.render().el);
    this.content.html($('#editQuote').html());
}

});

My itemsView render stuff:

renderItem: function(model){
    var itemView = new backboneQuote.Views.itemView({model: model});
    itemView.render();
    $(this.el).append(itemView.el);
    return this;
},

render: function(){
    this.collection.each(this.renderItem);
},

I click an element which navigates the app back to the "home" function (the click event is firing fine), but the content of "this.itemsView" never seem to get put back into "this.content" div. Can anyone spot anything wrong here?

As another massive help, if anyone could provide any overall BackboneJS wisdom on anything they see here then that would be a massive help.

In the home function, render does not return html. You need to call the .el property on it, the way you have done in qouteEdit. I am assuming this was a typo in the question and not in the code. — Amith George
@AmithGeorge You'd think it might be a typo, but no, I'm still learning! I get this error: "Uncaught TypeError: Cannot read property 'el' of undefined" when I add .el on the end... — benhowdle89
You mean this.itemsView.render() is returning undefined? Could you verify if the render function in itemsView has the return this; at the end of it? — Amith George

Amith George Amith George · Accepted Answer · 2012-11-29T11:50:14

Typically, in Backbone apps, we write the render method to set the content of the views el. It is the responsibility of the code that calls render to ensure that the el is shown at the right place.

In the router,

home: function(){

    this.content.html(this.itemsView.render());

},

you are not accessing the .el property. First fix is to add that there.

home: function(){

    this.itemsView.render();
    this.content.html(this.itemsView.el);

},

This assumes that your collection view has an el property, which Backbone views by default tend to have.

Considering this is such a common task, the convention is to return this at the end of each views render method.

render: function(){
    this.collection.each(this.renderItem);
    return this;
 },

home: function(){
    this.content.html(this.itemsView.render().el);
},

Backbone div not being repainted

1 Answers