Backbone.js extend View

Last Updated : 20 Aug, 2022

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>