Skip to content
Related Articles

Related Articles

Backbone.js set Collection

View Discussion
Improve Article
Save Article
  • Last Updated : 26 Jul, 2022

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"
}]

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!