Open In App

Backbone.js push Collection

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will see the Backbone.js push Collection. The Backbone.js push Collection can be utilized to add the model to the collection’s end i.e. it simply pushes the model to the collection.

Syntax:

collection.push(models, options)    

Parameters: It will take 2 parameters, which are described below:

  • models: This parameter value is used to specify the names of the instances to be pushed into the collection.
  • options: This parameter has the model type which will be added to the specified collection.

Example 1: In this example, we will create a model Food with 2 items and push again 2 items with the push() method then display them.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Backbone.js push Collection</title>
    <script src=
            type="text/javascript">
    </script>
    <script src=
            type="text/javascript">
    </script>
    <script src=
            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_name: "Butter",
                food_region: "Hyderabad"
            }
        });
         
        // 'FoodCollection' is a collection instance and
        // '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]);
         
        // Get the elements using JSON.stringify()
        document.write('Actual Food : '
            + JSON.stringify(final.toJSON()));
        document.write("<br>");
        document.write("<br>");
        var food3 = new Food({
            name: "Icecream",
            country: "Hyderabad"
        });
        var food4 = new Food({
            name: "cake/chocos",
            country: "Guntur"
        });
 
        // Push food3 and food4 model using push 
        final.push(food3);
        final.push(food4);
 
        // Get the elements using JSON.stringify()
        document.write('After Pushed : '
        + JSON.stringify(final.toJSON()));
    </script>
</body>
</html>


Output:

Actual Food : [{“name”:”Icecream”,”country”:”Hyderabad”,”food_name”:”Butter”,”food_region”:”Hyderabad”}, {“name”:”cake/chocos”,”country”:”Guntur”,”food_name”:”Butter”,”food_region”:”Hyderabad”}] After Pushed : [{“name”:”Icecream”,”country”:”Hyderabad”,”food_name”:”Butter”,”food_region”:”Hyderabad”}, {“name”:”cake/chocos”,”country”:”Guntur”,”food_name”:”Butter”,”food_region”:”Hyderabad”}, {“name”:”Icecream”,”country”:”Hyderabad”,”food_name”:”Butter”,”food_region”:”Hyderabad”}, {“name”:”cake/chocos”,”country”:”Guntur”,”food_name”:”Butter”,”food_region”:”Hyderabad”}]

Example 2: In this example, we will create a model Food with 2 items and push again 2 items with the push method then display the length of the collection.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Example of Backbone.js</title>
    <script src=
            type="text/javascript">
    </script>
    <script src=
            type="text/javascript">
    </script>
    <script src=
            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_name: 'Butter',
                food_region: 'Hyderabad',
            },
        });
        // '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]);
 
        // Get the count of total food using length
        document.write('Actual Food Count : ' + final.length);
        document.write('<br>');
        document.write('<br>');
        var food3 = new Food({
            name: 'Icecream',
            country: 'Hyderabad'
        });
        var food4 = new Food({
            name: 'cake/chocos',
            country: 'Guntur'
        });
        // push food3 and food4 model using pusg
        final.push(food3);
        final.push(food4);
 
        // Get the count of total food using length
        document.write('After Pushed Count : ' + final.length);
    </script>
</body>
</html>


Output:

Actual Food Count : 2

After Pushed Count : 4

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



Last Updated : 13 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads