CODEWITHSUNDEEP
javascriptcollectionsbackbone.jsmodel
Mark O Keeffe
Mark O Keeffe

Reputation: 301

Can't see my model within backbone collection

I'm trying to add an item to a collection but first I want to remove the existing one. Only one item will ever exist. I can create a new one, just not remove one. Maybe I'm doing it backwards.

This is my collection, the changetheme is the function that gets called, which works away, but can't figure out how to remove the existing one. this.model.destroy() just throws an error. Maybe i'm out of context.

bb.model.Settings = Backbone.Collection.extend(_.extend({
    model:  bb.model.Setting,
    localStorage: new Store("rrr"),

    initialize: function() {
        var self = this
        this.model.bind('add', this.added, this);
    },
    changetheme: function(value) {
        var self = this
        this.destroy();
        this.create({theme:value});
    },
}));

If it matters this is my model

bb.model.Setting = Backbone.Model.extend(_.extend({
    defaults: {
        theme: 'e'
    },
    initialize: function() {
        var self = this;
    },
    added: function(item) {
        var self = this;
        this.destroy(); 
    },
}));

Upvotes: 0

Views: 293

Answers (1)

mumu2
mumu2

Reputation: 671

To remove first item from collection you can call collection.shift(), also you can just clear collection by calling collection.reset(). So in your case one could write:

changetheme: function(value) {
    this.shift();
    this.create({theme:value});
}

UPD Ok, let me explain - in your example localStorage plays like any other server side. So when you call "create", then according to docs backbone instantiates a model with a hash of attributes, saves it to the server(localStorage), and adds to the set after being successfully created. That is why your collection items count increases on each page refresh. But when you call shift/remove docs then only you client side collection is affected, not the server(localStorage) one. Now the best option for you to remove model both from server and client is calling model's destroy method like that:

changetheme: function(value) {
    var modelToDelete = this.at(0) //take first model
    modelToDelete.destroy();
    this.create({theme:value});
}

Upvotes: 1

Related Questions