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
