Backbone.js pop Collection

Last Updated : 13 Jun, 2022

In this article, we will discuss pop collection The Backbone.js pop collection is used to remove a model or an array of models from the given collection. It is similar to the remove method.

Syntax:

collection.pop(models,options)

Parameters: It will take two parameters.

models: this is the first parameter that is used to specify the names of the instances,
options: this parameter takes the model type which will be removed from the given collection.

Example 1: In this example, we will create a model Food and remove food1 using pop.

HTML

<!DOCTYPE html>
<html>

<head>
    <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_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  
         });  
  
         // "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"});  
  
         // 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>");  
  
         // remove food1 model using pop  
         final.pop([food1]);  
         document.write('Popped Food Count : ' + final.length);  
      </script>  
</head>

<body></body>

</html>

Output:

Actual Food Count : 2
Popped Food Count : 1

Example 2: In this example, we will create a model Food and remove food1 and food3 using pop.

HTML

<!DOCTYPE html>
<html>

<head>
    <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_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  
         });  
  
         // "food1","food2" and "food3" 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: "drinks",  country:"Guntur"});
  
         // add() method adds the models 'food1' and 'food2'
         // to the collection instance 'final'  
         var final = new FoodCollection();  
         final.add([food1,food2,food3]);  
  
          // get the count of total food using length  
         document.write('Actual Food Count : ' + final.length);  
         document.write("<br>");  
  
         // remove food1 and food3 model using pop  
         final.pop([food1,[food3]]);  
         document.write('Removed Food Count : ' + final.length);  
      </script>  
</head>

<body></body>

</html>

Output:

Actual Food Count : 3
Removed Food Count : 2

Backbone.js Collections

gottumukkala_sivanagulu

Improve

Article Tags :

Backbone.js pop Collection

Similar Reads

Thank You!

What kind of Experience do you want to share?