Open In App

Backbone.js constructor/initialize Model

Improve
Improve
Like Article
Like
Save
Share
Report

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;">
        GeeksforGeeks
    </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;">
        GeeksforGeeks
    </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



Last Updated : 04 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads