Backbone.js add Collection

Last Updated : 03 Nov, 2022

The Backbone.js add collection is utilized to include a model or an array of models to the given collection. It takes the model as the first parameter and options as the second parameter. In this article, we will discuss the Backbone.js add collection.

Syntax:

collection.add(models, [options])

Parameter Values: It accepts 2 parameters, that are described below:

models: This parameter is used to specify the names of the instances that are added to the collection.
options: This parameter takes the model type which will be added to the given collection.

Example 1: In this example, we are adding 2 items to a collection array.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Backbone.js add Collection</title>
    <script src=
"https://code.jquery.com/jquery-2.1.3.min.js"
            type="text/javascript">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
            type="text/javascript">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
            type="text/javascript">
    </script>
</head>
 
<body>
    <script type="text/javascript">
       
        // 'Food' is a model and that contains the 
        // default value for the  model  
        var Food = Backbone.Model.extend({
            defaults: {
                food_region: "India"
            }
        });
       
        // Here the  'FoodCollection' is a collection instance and 
        // model 'Food' is specified by overriding the 'model' property  
        var FoodCollection = Backbone.Collection.extend({
            model: Food
        });
       
        // The instances "food1" and "food2" are created
        // for the model "Food"  
        var food1 = new Food({
            name: "Icecream",
            country: "Hyderabad"
        });
        var food2 = new Food({
            name: "cake/chocos",
            country: "Guntur"
        });
       
        // The add() method adds the models 'food1' and 'food2' 
        // to the collection instance 'final'  
        var final = new FoodCollection();
        final.add([food1, food2]);
       
        // Display the items in the collection 
        document.write("Values :", JSON.stringify(final.toJSON()));
        document.write("<br>");
    </script>
</body>
</html>

Output:

Values :
[{"name":"Icecream","country":"Hyderabad","food_region":"India"},
{"name":"cake/chocos","country":"Guntur","food_region":"India"}]

Example 2: In this example, we will add 2 items again

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Backbone.js add Collection</title>
    <script src=
"https://code.jquery.com/jquery-2.1.3.min.js"
            type="text/javascript">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
            type="text/javascript">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
            type="text/javascript">
    </script>
</head>
 
<body>
    <script type="text/javascript">
     
        // 'Food' is a model and that contains the
        // default value for the  model  
        var Food = Backbone.Model.extend({
            defaults: {
                food_region: "India"
            }
        });
         
        // Here the  'FoodCollection' is a collection instance and model 
        // 'Food' is specified by overriding the 'model' property  
        var FoodCollection = Backbone.Collection.extend({
            model: Food
        });
         
        // The instances "food1" and "food2" are created for
        // the model "Food"  
        var food1 = new Food({
            name: "Icecream",
            country: "Hyderabad"
        });
        var food2 = new Food({
            name: "cake/chocos",
            country: "Guntur"
        });
         
        // The add() method adds the models 'food1' and 
        // 'food2' to the collection instance 'final'  
        var final = new FoodCollection();
        final.add([food1, food2]);
         
        // Display the items in the collection 
        document.write("Values : ", JSON.stringify(final.toJSON()));
        document.write("<br>");
        document.write("<br>");
        var food3 = new Food({
            name: "fish",
            country: "delhi"
        });
        var food4 = new Food({
            name: "onions",
            country: "indore"
        });
        final.add([food3, food4]);
        document.write("Values again added: ", 
            JSON.stringify(final.toJSON()));
    </script>
</body>
</html>

Output:

Values : 
[{"name":"Icecream","country":"Hyderabad","food_region":"India"},
{"name":"cake/chocos","country":"Guntur","food_region":"India"}]

Values again added: 
[{"name":"Icecream","country":"Hyderabad","food_region":"India"},
{"name":"cake/chocos","country":"Guntur","food_region":"India"},
{"name":"fish","country":"delhi","food_region":"India"},
{"name":"onions","country":"indore","food_region":"India"}]

Reference: https://backbonejs.org/#Collection-add