By Vishal Basumatary in javascript — Mar 24, 2023

Backbone Add To Collection

As a developer, I have worked with Backbone.js for several projects where I needed to manage collections of models. In Backbone, a collection is an ordered set of models that you can manipulate easily.

To add a model to a Backbone collection, you can use the add() method which is provided by the Collection class. The add() method can take multiple arguments, each of which is an instance of a model that you want to add to the collection.

Add a single model to a collection

The simplest way to add a single model to a collection is to pass the model instance to the add() method. Here is an example:


var myModel = new Backbone.Model({
  title: "New Model",
  content: "This is a new model"
});

var myCollection = new Backbone.Collection();

myCollection.add(myModel);

Here, we create a new Backbone model instance and store it in the myModel variable. We then create a new collection instance using the Backbone.Collection() constructor and store it in the myCollection variable. Finally, we use the add() method to add the myModel instance to the myCollection.

Add multiple models to a collection

You can also add multiple models to a collection by passing an array of model instances to the add() method. Here is an example:


var myModel1 = new Backbone.Model({
  title: "New Model 1",
  content: "This is a new model 1"
});

var myModel2 = new Backbone.Model({
  title: "New Model 2",
  content: "This is a new model 2"
});

var myCollection = new Backbone.Collection();

myCollection.add([myModel1, myModel2]);

Here, we create two new Backbone model instances and store them in the myModel1 and myModel2 variables. We then create a new collection instance using the Backbone.Collection() constructor and store it in the myCollection variable. Finally, we use the add() method to add both model instances to the myCollection.

Add a model at a specific index

By default, the add() method adds models to the end of the collection. However, you can add a model at a specific index by passing an options object with the at property set to the desired index. Here is an example:


var myModel = new Backbone.Model({
  title: "New Model",
  content: "This is a new model"
});

var myCollection = new Backbone.Collection();

myCollection.add(myModel, { at: 0 });