Collections in backbone.js are ordered sets of model. We can define the type of the model and the instance of properties for a collection. we can also bind “change” events to be notified whenever a model present in the collection is modified, we can also listen for “add” and “remove” events, and also fetch the collection from the server. The creation of the collection is to serve the event binding whenever any modification is made in the collection. The data is retrieved from the database and is populated using models and collections with the help of custom binding events.
Syntax: (by extending the class)
Backbone.Collection.extend( properties, classProperties )
Parameter description:
- properties: It is used to describe the instance properties for a collection.
- classProperties: It is used to describe the class properties for a collection.
There are various methods associated with backbone collection:
Backbone collection methods are as follows:
- extend() Method: It is used to create a custom collection by extending the parent class collection.
- model() Method: It is used to describe the model of the class.
- initialize() Method: It is used for the creation of an instance of a model initialize method is used.
- models() Method: It is used for the creation of an array of models inside the collection class, models() method is used.
- toJSON() Method: It is used to return an array that contains the attributes hash of every model.
- sync() Method: It is used to specify the state of the model and is used for displaying the particular state of the collection.
- add() Method: It is used to add a model to the array containing models, it fires an add event for each model stored in the array.
- remove() Method: It is used for the removal of a model or an array from the collection of models.
- reset() Method: It is used to add as well as remove models from the collection, it can also replace the models with new models.
- set() Method: It is used for performing updates on the collection with the new passed model’s list.
- get() Method: It is used to retrieve a model from the collection which can be specified by the help of id or cid or in some cases a model can be passed.
- at() Method: It is used to retrieve a model from the collection with the help of indexing.
- push() Method: It is used to push or add models into the collection.
- pop() Method: It is used to remove a model or set of models from the collection.
- unshift() Method: It is used to add a specific model at the very beginning point of the collection.
- shift() Method: It is used for removing the first item from the list of collections.
- slice() Method: It is used for viewing the shallow copy of all the elements present in the collection.
- length() Method: It is used for counting the no. of models present in the collection list.
- comparator() Method: It is used for sorting all the items present in the list of the collection.
- sort() Method: It is used for sorting all the items present in the list of the collection by utilizing the comparator method.
- pluck() Method: It is used for retrieving the attributes of the model present in the collection.
- where() Method: It is used for displaying the models by matching the attribute of the items present in the collection.
- findWhere() Method: It is used for finding the model with a specific attribute from the items present in the list of the collection.
- URL() Method: It is used for creating an instance of the collection. It is also used for locating the location of the resource.
- parse() Method: It is used to retrieve the data of the items in the collection using a response pass filter.
- clone() Method: It is used for retrieving a rough copy of a specific object.
- fetch() Method: It is used for the extraction of data from models present in the collection.
- create() Method: It is used for creating a newer instance of a model from the collection.
Example 1: In this example, we will be using the button to show the data.
HTML
<!DOCTYPE html> <html> <head> <title>collection example</title> type="text/javascript"> </script> <script src= type="text/javascript"> </script> <script src= type="text/javascript"> </script> </head> <body style="background-color:black;"> <h1 style="color:green;">neveropen</h1> <button onclick="invoke()">Show data:</button> <script type="text/javascript"> var data_collection = Backbone.Model.extend({ defaults: { website: "GeeksForGeeks", rating: 10 }, }); var example = Backbone.Collection.extend({ model: data_collection }); function invoke() { var Z = new example({}); document.write("Collection: ", JSON.stringify(Z)); } </script> </body> </html> |
Output:
Example 2: In this example, we will direct the collection of data.
HTML
<!DOCTYPE html> <html> <head> <title>collection example</title> type="text/javascript"> </script> <script src= type="text/javascript"> </script> <script src= type="text/javascript"> </script> </head> <body> <script type="text/javascript"> var data_collection = Backbone.Model.extend({ defaults: { website: "GeeksForGeeks", rating: 10 }, }); var example = Backbone.Collection.extend({ model: data_collection }); var Z = new example({}); document.write("Collection: ", JSON.stringify(Z)); </script> </body> </html> |
Output:
Reference: https://backbonejs.org/#Collection
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!
