CODEWITHSUNDEEP
javascriptbackbone.js
Naor
Naor

Reputation: 24053

populate collections in backbone

I have a backbone collection and I want to create a method that populates the collection. What I found is the push method but this require to iterate over all the items:

define([
    ...
], function($, _, Backbone, imagesCollection, imageTemplate, gridView) {
    var AppView = Backbone.View.extend({
        el: '#container',
        template: _.template( imageTemplate ),
        events: {
            'click #search': 'search'
        },
        initialize: function() {
            this.input = this.$('#search-term');
        },
        populate: function(data) {
                for (var i=0;i<data.length;i++) {
                    imagesCollection.push(data[i]);
                }
                //IS THERE ANY WAY TO PREVENT ITERATING OVER ALL THE ITEMS?
        },
        search: function() {
            $.ajax({
                type: 'get',
                url: myurl,
                dataType:'jsonp',
                success: function(response){
                    populate(response);
                }
            });
        }
    });

    return AppView;
});

Is there any other solution? I am new to backbone so if you see anything wrong - please tell me.

Upvotes: 0

Views: 241

Answers (2)

BenjaminEllis
BenjaminEllis

Reputation: 166

It looks like you want a method to add the models. The most flexible way to do this is to use the collection's existing set method, passing any required options

populate: function(data, options) {
    imagesCollection.set(data, options);
}

The options for set allow you control what happens to models already in the collection (for example when calling populate again), the main options are: {add: false}, {remove: false}, or {merge: false} - see http://backbonejs.org/#Collection-set - this allows you to update existing models only ({add:false}), update and add new models ({remove: false}). The default is {merge: true} which will merge in the models you are adding, passed in via your data array.

You could also use the reset method, with no options. This is less flexible, but is the simplest method if you just want to clear the collection's existing models and add the new models you are passing in. It is different from set in that it will not fire an 'add' event for each new model that is added. Depending on how how your view works, this may or may not be beneficial.

Given that it looks as if you are writing a search feature, the incremental add / remove events fired by using set may be useful for dynamically updating your results view (you can listen to the add and remove events on the collection). Backbone collections also have an 'update' event which is fired just once per set of collection changes, which will be fired by set or add, and could be used to fire a rerender on your view.

Upvotes: 1

Stouffi
Stouffi

Reputation: 258

There are at least two ways to populate a backbone collection without iterating in my own code.

method add (which appends models you passed in)

populate: function(data) {
    imagesCollection.add(data); // old models will be preserved
}

method reset (which replaces all models in the collection by the new ones you provide)

populate: function(data) {
    imagesCollection.reset(data); // new models will erase the old ones
}

See http://backbonejs.org/#Collection-reset and http://backbonejs.org/#Collection-add

Upvotes: 5

Related Questions