Backbone Collection.fetch() returns first item null

Question

I'm using the following code in my view to fetch my collection from the server:

initialize: function () {
        _this = this;
        this.collection.fetch({
            success : function(collection, response) {
                _.each(response, function(i){  
                    var todo = new TodosModel({
                        id: i.id,
                        content: i.content,
                        completed: i.completed
                    });
                    // Add to collection
                    _this.collection.add(todo);
                    // Render
                    _this.render(todo);
                });
            },       
            error : function(collection, response) {
                console.log('ERROR GETTING COLLECTION!');
            }
        });
    },

Which seems to work - here's the output from my server:

{
  "0": {
    "id": 1,
    "content": "one",
    "completed": false
  },
  "3": {
    "id": 4,
    "content": "two",
    "completed": true
  },
  "4": {
    "id": 5,
    "content": "tester",
    "completed": false
  }
}

Except for the fact that if I log out my collection there is a null entry in the first position:

Which then causes issues as if I add an item it takes the ID of the last element. I'm new to backbone and am hoping I'm just missing something simple.

Answer 1

Here's my crack at a quick run through of your code. I haven't tested anything so there might be typos. I'm still not sure where the stray empty model is coming from but if you restructure your application as outlined below, I suspect the problem will go away.

The model and collection look okay so let us have a look at your view.

el: $('#todos'),
listBlock: $('#todos-list'),
newTodoField: $('#add input'),
//...
template: $('#todo-template').html(),
//...
events: { /* ... */ },

These should be okay but you need to ensure that all those elements are in the DOM when your view "class" is loaded. Usually you'd compile the template once:

template: _.template($('#todo-template').html()),

and then just use this.template as a function to get your HTML. I'll assume that template is a compiled template function below.

initialize: function () {
    _this = this;

You have an accidental global variable here, this can cause interesting bugs. You want to say var _this = this;.

    this.el = $(this.el);

Backbone already gives you a jQuery'd version of el in $el so you don't need to do this, just use this.$el.

    this.collection.fetch({
        success : function(collection, response) {
            _.each(response, function(i) {
                var todo = new TodosModel({ /* ... */ });
                // Add to collection
                _this.collection.add(todo);
                // Render
                _this.render(todo);
            });
        },
        //...

The collection's fetch will add the models to the collection before the success handler is called so you don't have to create new models or add anything to the collection. Generally the render method renders the whole thing rather than rendering just one piece and you bind the view's render to the collection's "reset" event; the fetch call will trigger a "reset" event when it has fetched so the usual pattern looks like this:

initialize: function() {
    // So we don't have to worry about the context. Do this before you
    // use `render` or you'll have reference problems.
    _.bindAll(this, 'render');

    // Trigger a call to render when the collection has some stuff.
    this.collection.on('reset', this.render);

    // And go get the stuff we want. You can put your `error` callback in
    // here if you want it, wanting it is a good idea.
    this.collection.fetch();
}

Now for render:

render: function (todo) {
    var templ = _.template(this.template);
    this.listBlock.append(templ({
        id: todo.get('id'),
        content: todo.get('content'),
        completed: todo.get('completed')
    }));
    // Mark completed
    if(todo.get('completed')) {
        this.listBlock.children('li[data-id="'+todo.get('id')+'"]')
                      .addClass('todo-completed');
    }
}

Normally this would be split into two pieces:

1. render to render the whole collection.
2. Another method, say renderOne, to render a single model. This also allows you to bind renderOne to the collection's "add" event.

So something like this would be typical:

render: function() {
    // Clear it out so that we can start with a clean slate. This may or
    // may not be what you want depending on the structure of your HTML.
    // You might want `this.listBlock.empty()` instead.
    this.$el.empty();

    // Punt to `renderOne` for each item. You can use the second argument
    // to get the right `this` or add `renderOne` to the `_.bindAll` list
    // up in `initialize`.
    this.collection.each(this.renderOne, this);
},

renderOne: function(todo) {
    this.listBlock.append(
        this.template({
            todo: todo.toJSON()
        })
    )
    // Mark completed
    if(todo.get('completed')) {
        this.listBlock.find('li[data-id="' + todo.id + '"]')
                      .addClass('todo-completed');
    }
}

Notice the use of toJSON to supply data to the template. Backbone models and collections have a toJSON method to give you a simplified version of the data so you might as well use it. The model's id is available as an attribute so you don't have to use get to get it. You could (and probably should) push the todo-completed logic into the template, just a little

<% if(completed) { %>class="completed"<% } %>

in the right place should do the trick.

addTodo: function (e) {
    //...

        var todo = new TodosModel({
            id: todoID,
            content: todoContent,
            completed: todoCompleted
        });
        this.render(todo);
        todo.save();
        _this.collection.add(todo);

You could bind renderOne to the collection's "add" event to take care of rendering the new model. Then use the save callbacks to finish it off:

var _this = this;
var todo  = new TodosModel({ /* ... */ });
todo.save({}, {
    wait: true,
    success: function(model, response) {
        // Let the events deal with rendering...
        _this.collection.add(model);
    }
});

Again, an error callback on the save might be nice.

completeTodo: function (e) {
    //...
    todo.save({
        completed: todoCompleted
    });
}

The save call here will trigger a 'change:completed' event so you could bind to that to adjust the HTML.

removeTodo: function (e) {
    //...
}

The destroy call will trigger a "destroy" event on the model and on the collection:

Any event that is triggered on a model in a collection will also be triggered on the collection directly, for convenience. This allows you to listen for changes to specific attributes in any model in a collection, [...]

So you could listen for "destroy" events on the collection and use those to remove the TODO from the display. And destroying the model should remove it from the collection without your intervention.

printColl: function () {
    this.collection.each(function (todo) {
        console.log('ID: '+todo.get('id')+' | CONTENT: '+todo.get('content')+' | COMPLETED: '+todo.get('completed'));
    });
}

You could just console.log(this.collection.toJSON()) instead, you'd have to click around a little to open up the stuff in the console but you wouldn't miss anything that way.

All the event binding for the collection would take place in your view's initialize method. If you're going to remove the view then you'd want to override the remove to unbind from the collection to prevent memory leaks:

remove: function() {
    // Call this.collection.off(...) to undo all the bindings from
    // `initialize`.
    //...

    // Then do what the default `remove` does.
    this.$el.remove()
}

You could also use a separate view for each TODO item but that might be overkill for something simple.