Skip to content
Related Articles

Related Articles

Backbone.js at Collection

View Discussion
Improve Article
Save Article
  • Last Updated : 21 Jun, 2022

In this article, we will discuss Backbone.js at collection. The Backbone.js at collection is used to return the model from the given collection by specifying the index. Indexing starts with 0.

Syntax:

collection.at(models,options)   

Parameters: It will take two parameters.

  • models: this is the first parameter that is used to specify the names of the instances to be pushed into the collection, 
  • options: this parameter takes the model type which will be added to the specified collection  {at:index} .

Example 1: In this example, we will return the first index values.

HTML




<!DOCTYPE html>
<html>
 
<head>
        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_name: "Butter",
                food_region: "Hyderabad"
            }
        });
 
        // 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 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"
        });
         
        var food3 = new Food({
            name: "Icecream",
            country: "Hyderabad"
        });
 
        var final = new FoodCollection();
        final.add([food1, food2, food3]);
 
        var food4 = new Food({
            name: "cake/chocos",
            country: "Guntur"
        });
         
        final.add(food4, { at: 0 });
 
        document.write('New Values: ' +
            JSON.stringify(final.toJSON()));
    </script>
</head>
 
<body></body>
 
</html>


Output:

New Values: [{
    "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"
},
{
    "name":"Icecream",
    "country":"Hyderabad",
    "food_name":"Butter",
    "food_region":"Hyderabad"
}]

Example 2: In this example, we will return the last index values.

HTML




<!DOCTYPE html>
<html>
 
<head>
            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_name: "Butter", 
               food_region:"Hyderabad" 
            
         }); 
   
         // 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 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"});
         var food3 = new Food({name: "Icecream",
                               country:"Hyderabad"}); 
            
         var final = new FoodCollection(); 
         final.add([food1,food2,food3]); 
    
         var food4 = new Food({name: "cake/chocos", 
                               country:"Guntur"});
         final.add(food4,{at:3}); 
   
         document.write( 'New Values: ' +
                        JSON.stringify(final.toJSON()));
      </script
</head>
 
<body></body>
 
</html>


Output:

New Values: [{
    "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"
}]

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!