Backbone.js is a compact library used to organize JavaScript code. Another name for it is an MVC/MV* framework. If you’re not familiar with MVC, it’s just a method for creating user interfaces. JavaScript functions make it much simpler to create a program’s user interface. Models, views, events, routers, and collections are among the building blocks offered by BackboneJS to help developers create client-side web applications.
The collection’s constructor/initialize is invoked indirectly when a new instance of a model is created and that model is passed inside the collection. We can override the model’s object from the collection.
Syntax:
new Backbone.Collection(models, options)
Properties:
- models: It is used to specify the array of models which you want to pass initially.
- options: This parameter is used to define the collection kinds that the passing model object is directly attached to the collection. Abd this is optional.
Example 1: The code below demonstrates how we can initiate a collection through a model and override the model object.
HTML
<!DOCTYPE html><html><head> <title> Backbone.js constructor/initialize Collection </title> <script src= type="text/javascript"> </script> <script src= type="text/javascript"> </script> <script src= type="text/javascript"> </script></head><body> <h1 style="color:green;"> neveropen </h1> <h3> Backbone.js constructor/initialize Collection </h3> <script type="text/javascript"> var MyModel = Backbone.Model.extend({ defaults: { title: "GFG", about: "Computer portal for neveropen" }, initialize: function () { console.log("The model has been initialised"); } }); var MyCol = Backbone.Collection.extend({ model: MyModel }); var update = new MyModel({ title: "GeeksForGeeks", about: "Providing Quality Computer Science articles for Geeks" }); var mycol = new MyCol([update]); console.log("<br>" + JSON.stringify(mycol.models)); </script></body></html> |
Output:
Example 2: The code below demonstrates how we can initiate a collection through a model and override the model object and process that data from collection through a Function in the Model.
HTML
<!DOCTYPE html><html><head> <title> Backbone.js constructor/initialize Collection </title> <script src= type="text/javascript"> </script> <script src= type="text/javascript"> </script> <script src= type="text/javascript"> </script></head><body> <h1 style="color:green;"> neveropen </h1> <h3> Backbone.js constructor/initialize Collection </h3> <script type="text/javascript"> var MyModel = Backbone.Model.extend({ defaults: { title: "GFG", about: "Computer portal for neveropen" }, initialize: function () { this.render() }, render: function () { console.log("Title : " + this.get('title'), "<br>About Us : " + this.get('about')); }, }); var MyCol = Backbone.Collection.extend({ model: MyModel }); var update = new MyModel({ title: "GeeksForGeeks", about: "Providing Quality Computer Science articles for Geeks" }); var mycol = new MyCol([update]); </script></body></html> |
Output:
Reference: https://backbonejs.org/#Collection-constructor
