Backbone.js extend() Model

The Backbone.js extend Model is used to extend the backbone’s Model class in which we can create our own Model. It also facilitates the instance properties & the optional classProperties that are attached to the constructor function of the Model directly. Extend method of the model create a prototype chain, so subclass created with extend can be further extended and subclassed as far as you like.

Syntax:

Backbone.Model.extend( Properties, classProperties );

Parameters: It accepts two parameters that are described below:

Parameters: This parameter provides the instance properties for the specified collection class.
classProperties: This class property is attached to the collection’s constructor function.

Example 1: In this example, we will extend a Model with some default values.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>BackboneJS Model extend</title>
    <script src=
"https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
        type="text/javascript">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
        type="text/javascript">
    </script>
</head>

<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>

    <h3>BackboneJS Model extend</h3>

    <script type="text/javascript">
        var model = Backbone.Model.extend({
            defaults: {
                id: 1,
                name: 'Geeks'
            },
        });

        var temp = new model();
        document.write(JSON.stringify(temp));
    </script>
</body>

</html>

Output:

Example 2: In this example, we will make a chain of extend function and see the properties of each object. Extend method of model create a prototype chain, so subclass created with extend can be further extended and subclassed as far as you like.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>BackboneJS Model extend</title>
    <script src="https://code.jquery.com/jquery-2.1.3.min.js" 
        type="text/javascript">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
        type="text/javascript">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
        type="text/javascript">
    </script>
</head>

<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>

    <h3>BackboneJS Model extend chaining</h3>

    <script type="text/javascript">
        var model = Backbone.Model.extend({
            defaults: {
                id: -1,
                name: 'Geeks'
            },
        });

        var temp = new model();
        document.write(JSON.stringify(temp));

        var model2 = model.extend({

            initialize: function () {
                document.write(
    "<br> This function is extend by second extend");
            },
        });

        var temp2 = new model2({ id: 2, name: 'cody' });

        document.write("<br>", JSON.stringify(temp2));
    </script>
</body>

</html>

Output:

Reference: https://backbonejs.org/#Model-extend

Backbone.js extend() Model

Explore