Constructor is the function used by Backbone.js to set up its structure. If we want to override the constructor, which allows you to replace the actual constructor function for your model.
Syntax:
new Model( attributes, options );
Properties:
- attributes: This attribute defines the properties of a model when creating an instance of a model.
- options: These are the options that are used with attributes when a model is created.
Example 1: In this example, we will see how to create our custom constructor which will append some attributes and properties to the Model.
HTML
<!DOCTYPE html><html><head> <title>BackboneJS Model constructor</title> 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>BackboneJS Model constructor</h3> <script type="text/javascript"> var car = Backbone.Model.extend({ constructor: function () { Backbone.Model.apply(this, arguments); document.write("this is written " + "by custom constructor <br>"); this.set("color", 'white'); }, print: function () { document.write("Brand : " + this.get('Name'), "<br>Color : " + this.get('color'), "<br>Gear : " + this.get('gear')); }, }); var audi = new car({ Name: "Audi", color: "Black", gear: 4, wheel: 4 }); audi.print(); </script></body></html> |
Here in the above code, Backbone.Model.apply(this, arguments) is used to add the default constructor properties in the custom constructor.
Output:
BACKBONE CONSTRUCTOR
Initialization: When creating an instance of a model, initial attributes are passed to the model which is set on the model. Initialize is a function that is called by the constructor when model instance is created. We can define initialize function to our model as initialize property.
Syntax:
new Model( attributes, options );
Properties:
- attributes: This attribute defines the properties of a model when creating an instance of a model.
- options: These are the options that are used with attributes when the model is created.
Example 2: In this example, we will see how to define the initialize function of the model.
HTML
<!DOCTYPE html><html><head> <title>BackboneJS Model constructor</title> 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>BackboneJS Model constructor</h3> <script type="text/javascript"> var Geek = Backbone.Model.extend({ initialize: function () { this.render(); }, render: function () { document.write("Id : " + this.get('id'), "<br>Rank : " + this.get('rank'), "<br>Total problem solved : " + this.get('problem_sol')); }, }); var geek = new Geek({ id: "100e1", rank: "Ace", problem_sol: 400 }); </script></body></html> |
In the above code, initialize function is called by the constructor function which calls the render function which will render all the details on web-page.
BACKBONE INITIALIZE
Reference: https://backbonejs.org/#Model-constructor
