CODEWITHSUNDEEP
javascriptbackbone.jsmarionette
WillyCornbread
WillyCornbread

Reputation: 837

Why does my backbone collection contain an empty model item?

I have a game model with a scorecards attribute that is a collection. I'm nesting this collection so when I initialize I'm using nestCollection to create the change handlers to keep everything updated and in sync. Whenever I create a new game model, an empty model is added to the scorecards attribute collection but only in memory - what is saved to localstorage is correct. I can't figure out why.

This is my game model definition- Notice the console log statement results:

var Game = Backbone.Model.extend({
localStorage: new Backbone.LocalStorage('datastore'),
defaults: {
    name     : '',
    scorecards: new ScorecardList(),
    created   : 0
},

initialize : function() {
    console.log(this.scorecards);           // prints undefined
    console.log(this.get('scorecards'));    // length is 0 as expected

    this.scorecards = nestCollection(this, 'scorecards', new ScorecardList(this.get('scorecards')));

    console.log(this.scorecards);           // length is 1, with empty element in it
    console.log(this.get('scorecards'));    // length is 0 as expected

    if (this.isNew()) this.set('created', Date.now());
}
});

The nesting code:

function nestCollection(model, attributeName, nestedCollection) {
//setup nested references
for (var i = 0; i < nestedCollection.length; i++) {
    model.attributes[attributeName][i] = nestedCollection.at(i).attributes;
}
//create empty arrays if none

nestedCollection.bind('add', function (initiative) {
    if (!model.get(attributeName)) {
        model.attributes[attributeName] = [];
    }
    model.get(attributeName).push(initiative.attributes);
});

nestedCollection.bind('remove', function (initiative) {
    var updateObj = {};
    updateObj[attributeName] = _.without(model.get(attributeName), initiative.attributes);
    model.set(updateObj);
});
return nestedCollection;
}

This is the code I use to create a new game:

addGame: function () {
   var g = new Game({
       name:this.ui.gameName.val()
   });
   app.gameList.create(g,{wait:true});
   //Backbone.history.navigate('game/new/'+ g.id, true);
}

Upvotes: 0

Views: 241

Answers (1)

Loamhoof
Loamhoof

Reputation: 8293

Your problem comes from this piece of code:

new ScorecardList(this.get('scorecards'))

Here you're giving your ScorecardList constructor another collection as argument. This collection happens to be an object. So your collection's constructor will think it's an object you're giving it to create a model.

So basically, this.get('scorecards')) gets cast into a Scorecard (or whatever your model is called), and that's why you have an empty model.

Passing arguments to the constructor for a different purpose than the creation of your collection is a bad idea, you should call a method afterwards.

Upvotes: 3

Related Questions