Skip to content
Related Articles

Related Articles

Backbone.js constructor/initialize Model

Improve Article
Save Article
  • Last Updated : 04 Aug, 2022
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!