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>            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"             }          });             // '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>            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"             }          });             // '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
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen 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!
