Backbone.js extend View

Backbone.js extend view is a method under the view class that is used to extend the backbone.js view class in order to create a custom view class. For implementation, first of all, we need to create a custom view class and override the render function if required, also we can specify our own declarative events.

Syntax:

Backbone.view.extend( properties , [classProperties] )

Parameter values:

properties: It defines the instance properties for the view class.
classProperties: It defines the class properties of the constructor function attached to it.

Example 1: Basic example for implementing backbone.js extend the view.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Backbone.js view 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>

    <button onclick="invoke()">Click me</button>

    <script>
        var example = Backbone.View.extend({
            tagName: "test",
            className: "example_display",
            events: {
            },

            initialize: function () {

                // Put pre-render processing code here
                this.render();
            },

            render: function () {

                // Put html render content here
                document.write(
                    "<h2>This output is from render function</h2>");
            }
        });

        function invoke() {
            var obj = new example();
        }
    </script>
</body>

</html>

Output:

Example 2: In this example, we are using a simple boilerplate for the reference implementation.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Backbone.js view 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>
    <script>
        var example = Backbone.View.extend({
            tagName: "test",
            className: "example_display",

            events: {

            },

            initialize: function () {
                //put pre-render processing code here
                window.alert('Initialization function invoked');
                this.render();
            },

            render: function () {
                //put html render content here
                window.alert('render function invoked');
            }

        });

        var obj = new example();
    </script>
</body>

</html>

Output:

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

Explore