Horje
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


 


Reffered: https://www.geeksforgeeks.org

JavaScript

Related
Why we cannot catch error outside of function in JavaScript ? Why we cannot catch error outside of function in JavaScript ?
Command Line Flags by the Node Binary Command Line Flags by the Node Binary
Next.js Create Next App Next.js Create Next App
Implement polyfill for String.prototype.trim() method in JavaScript Implement polyfill for String.prototype.trim() method in JavaScript
Implement polyfill for Array.prototype.reduce() method in JavaScript Implement polyfill for Array.prototype.reduce() method in JavaScript

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 13



 

Horje