CODEWITHSUNDEEP
javascriptbackbone.jsunderscore.jsbackbone-events
lukaleli
lukaleli

Reputation: 3645

Backbone: keep in sync both collections

I have a collection of tiles. When app starts collection is fetched from server and its clone is assigned to a collection property of MdApp.TilesCollection object:

MdApp.TilesCollection.fetch({
        success: function(){
            console.log('Tiles collection fetched from server');
            console.log(MdApp.TilesCollection);
            if(!MdApp.TilesCollection.collection){
                MdApp.TilesCollection.collection = new Backbone.Collection(MdApp.TilesCollection.models);
                console.log('Made copy of collection in fetched collection instance');
            }
        },
        error: function(){
            console.log('Error!Unable to fetch tiles collection from server');
        }
    });

This is done for filtering purposes :

    TilesCollection = Backbone.Collection.extend({

    model: MdApp.TileModel,

    url : 'api/',

    rewriteModel: function(model){
        this.set(model);
    },

    byPrivate : function(){
        var filtered = this.collection.filter(function(tile){
            return tile.get('private') == '1';
        });
        console.log('filtered private: ' + filtered);
        return filtered;
    },

    byPublic : function(){
        var filtered = this.collection.filter(function(tile){
            return tile.get('private') == '0';
        });
        console.log('filtered public: ' + filtered);
        return filtered;
    },

    byFavourite: function(){
        var filtered = this.collection.filter(function(tile){
            return tile.get('favourite') == '1';
        });
        console.log('filtered favourite: ' + filtered);
        return filtered;
    },

    byAsc : function(){
        var filtered = this.collection.sortBy(function(tile){
            return tile.get('id');
        });
        console.log('filtered ascending: ' + filtered);
        return filtered;
    },

    byDesc : function(){
        var filtered = this.collection.sortBy(function(tile){
            return -tile.get('id');
        });
        console.log('filtered descending: ' + filtered);
        return filtered;
    },

    refilter: function(){
        console.log(this.collection);
        return this.collection.models;
    }
});

What I want to do is to keep MdApp.TilesCollection and MdApp.TilesCollection.collection in sync. When MdApp.TilesCollection's models are added or modified I want to make those particular changes to its clone. Of course I can just create new collection every time something is changed and assign it to that property, but it can be highly inefficient when collection is quite big. Does anyone can drop off any hint or solution?

Upvotes: 0

Views: 271

Answers (1)

frontsidebus
frontsidebus

Reputation: 120

You don't need to keep a clone of the collection in order to do filtering, you can do those filter operations on the original collection.

byPrivate : function(){
    var filtered = this.where({ private: 1 });
    console.log('filtered private: ' + filtered);
    return filtered;
}

If for whatever reason you still want to keep a clone and sync it, instead of creating a new collection in the fetch success callback you can simply reset it like this:

MdApp.TilesCollection.collection.reset(MdApp.TilesCollection.models);

Upvotes: 1

Related Questions