Backbone - Merge 2 Collections together?

Question

Suppose there are 2 Collections, representing respectively /api/page/1 and /api/page/2; is there anyway (through Underscore, for example) to merge these 2 Collections into a new, single Collection?

Answer 1

Option 1

If you haven't fetched the collection yet, you can fetch the first one, then fetch the second one with the {add : true} flag and the second one will be merged into the first one:

collection.fetch({data : {page : 2});
=> [{id: 1, article : "..."}, {id: 2, article : "..."}];
collection.fetch({data : {page : 2}, add : true });
=> [{id: 1, article : "..."}, {id: 2, article : "..."}, {id: 3, article : "..."}];

Option 2

If you've already fetched the collections and have them stored in two variables, you can just add all contents of the second collection into the first one:

collection1.add(collection2.toJSON());

This options suffers from the fact that the first collection will fire the "add" event when the second collection is added to it. If this has side effects such as undesired UI that re-renders due to this event, you can suppress it by adding the {silent : true} flag

collection1.add(collection2.toJSON(), {silent : true});

Option 3

If you just need the JSON format of these collections, i.e. for HTML template rendering purposes, you can just reduce everything to JS literals (arrays, objects):

collection1.toJSON().concat(collection2.toJSON());
=> [{id: 1, article : "..."}, {id: 2, article : "..."}, ...];

Option 4 = Option 2 + 3

If you've already fetched both collections, you can reduce to JS literals and add everything to a fresh Backbone collection

var rawCollection = collection1.toJSON().concat(collection2.toJSON());
var newCollection = new Backbone.Collection(rawCollection);

Answer 2

use

collection.models

insted of

collection.toJSON()

Answer 3

try this, collection is array of models

collection1.add(collection2.models); 

if we use

 collection1.add(collection2.toJSON());

then reference chage

Answer 4

Collection.models provides direct access to the array of moels and Collection.add will take an array of models as an argument.

Answer 5

collection.add(models, [options]) 

Collection is array of models

collection.models

returns array of models

Add a model (or an array of models) to the collection.

A = Backbone.Collection;
collection1 = new A([
    {key, 'value'},                  //model1
    {key : value1}                   //model2 in collection1
]);

B = Backbone.Collection;
collection2 = new B([
    {key1, 'value'},                 //model1
    {key1 : value1}                  //model2 in collection2
]);


collection1.add(collection2.models);  //now, collection1 has four models..

Answer 6

It seems to me that by doing this, you lose the semantic tied to /api/page/{1, 2}/.

It also seems to me that neither backbone, neither underscore, provides you with a function/method doing exactly what you're trying to do.

So your options :

• create a new collection, add each item from your previous collections;
• add first collection items to the second one

But you probably already knew this.