Adding model to a collection not working

Question

I am trying to play around with Backbone and seem to have run into a problem. My event is firing but the collection is not being updated. I've include the event callback below but the whole example can be seen here: http://jsfiddle.net/xp27dm7L/7/

 addItem: function() {
    alert(1)
    var id = this.collection.length;
    this.collection.add({
        "id": "p"+id,
        "name" : "ghgjhj",
        "title" : "EsssyyyyEEE",
        "background" : "ssssFyFFF"
    });
},

what am i doing wrong?

Answer 1

The problem is that you are adding an item with a duplicate ID.

If you do the following, it works:

this.collection.add({
    "id": "p"+Math.random(), // Just an example, of course!
    "name" : "ghgjhj",
    "title" : "EsssyyyyEEE",
    "background" : "ssssFyFFF"
 });

Ideally, you might not declare the id at all and let Backbone handle that:

this.collection.add({
    "name" : "ghgjhj",
    "title" : "EsssyyyyEEE",
    "background" : "ssssFyFFF"
});

You can also use the length of your collection to set the new id:

var id = this.collection.length + 1;
this.collection.add({
   "id": "p" + id, 
   "name" : "ghgjhj",
   "title" : "EsssyyyyEEE",
    "background" : "ssssFyFFF"
});