Backbone.js set Collection

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

Backbone.js sync Collection

gottumukkala_sivanagulu

Improve

Article Tags :

Backbone.js set Collection

Similar Reads

Thank You!

What kind of Experience do you want to share?