Backbone.js set Collection

The Backbone.js set collection is used to update a model or an array of models in the given collection. If the model is not there, then it will create a model with given values,
Syntax:
collection.set(models,options)
Parameters: It will take two parameters.
- models: This is the first parameter which is used to specify the names of the instances,
- options: This parameter takes the model type which will update the values provided in the given collection.
Example 1: In this example, we will create a model Food and with food1 model and update the value using set()
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> <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 instance "food1" is created for the model "Food" var food1 = new Food({ name: "Icecream", city: "Hyderabad" }); // The add() method adds the model 'food1' to // the collection instance 'final' var final = new FoodCollection(); final.add([food1]); // Display the values document.write("Actual Value: ", JSON.stringify(final.toJSON())); document.write("<br>"); document.write("<br>"); // Update the values using set() final.set([food1, { name: "milk", country: "patna" }]); // Display the updated and actual values document.write("Updated Value: ", JSON.stringify(final.toJSON())); </script></head><body></body></html> |
Output:
Actual Value: [{
"name":"Icecream",
"city":"Hyderabad",
"food_region":"India"
}]
Updated Value: [{
"name":"Icecream",
"city":"Hyderabad",
"food_region":"India"
},
{
"name":"milk",
"country":"patna",
"food_region":"India"
}]
Example 2: In this example, we will create a model Food and with food1 model without any values and update the value using set().
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> <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 instance "food1" is created for the model "Food" var food1 = new Food(); // The add() method adds the model 'food1' to the // collection instance 'final' var final = new FoodCollection(); final.add([food1]); // Display the values document.write("Actual Value: ", JSON.stringify(final.toJSON())); document.write("<br>"); document.write("<br>"); // Update the values using set() final.set([food1, { name: "milk", country: "patna" }]); // Display the updated and actual values document.write("Updated Value: ", JSON.stringify(final.toJSON())); </script></head><body></body></html> |
Output:
Actual Value: [{"food_region":"India"}]
Updated Value: [{
"food_region":"India"
},
{
"name":"milk",
"country":"patna",
"food_region":"India"
}]
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!


