Backbone render not appending HTML after collection fetch

Question

I am building a checklist application which I just ported most of the code from the Backbone Todo example. I am stuck on the part where I refresh my application and its supposed to append the HTML back from everything stored in local storage. Append works when I type it in console, and new items for my checklist are added just fine. But refresh the page and everything is gone.

I have placed a console.log line to printout the contents of the view.render().el just before the append line, and have verified it is correct:

renderItem: function(listItem) {
    var view = new ListItemView({model: listItem});     
    this.$("#myChecklist").append(view.render().el);
    $('[type="checkbox"]').checkboxradio(); // jQuery re-render
},

If I put print out (console.log) the view.render().el, I am getting the correct contents. This is done after the document is ready. This is my initialize function where I bind the events:

initialize: function() {
    this.listenTo(checklistItems, 'add', this.renderItem); // runs renderItem() when model is added to checklist
    checklistItems.localStorage = new Backbone.LocalStorage("items");
    checklistItems.fetch();
},

After the renderItem function is called, the HTML remains untouched (the ul with id=myChecklist still has nothing inside).

The rest of the code is in my repo here. I'm using main.js, not app or index.js.

For the life of me, I can't figure out what's wrong, and have tried following the Todo example carefully but to no avail.

So checklistItems is global, you do have data in your local-storage items, but no 'add' events are triggered? Which version of Backbone is this? Have you tried listening to other events (such as 'all') on checklistItems to see what happens? — mu is too short
I found the problem. The Backbone Router appends a template to the HTML body, but this is happening after my items are "rendered" (onto the body that is not even instantiated). — Gary

Rida BENHAMMANE Rida BENHAMMANE · Accepted Answer · 2014-02-24T04:32:53

Try to initialize the checklistItems variable in the beginning of your script :

var checklistItems = new Backbone.Collection();
checklistItems.localStorage = new Backbone.LocalStorage("items");

window.HomeView = Backbone.View.extend({
...

Backbone render not appending HTML after collection fetch

1 Answers