What is a View in Backbone.js ?

Last Updated : 30 Nov, 2022

Backbone view is a convention for setting up view interface for user interaction. In backbone.js, there are 7 modules HTTP request, Router, View, Events, Model, and Collection. Whenever a user makes a request it is directed to the router and in response to these requests, a user interface is displayed at the user end which is known as Views. So basically View in backbone.js handles and specifies how and what to display to the user.

Backbone.js view does not determine anything about the HTML or CSS for us it can be used with any javascript library. It is a general idea for organizing user interface into logical views which are backed by models, so instead of re-rendering the entire page one can use View's "render" function to look for an element in the DOM and update it by binding the view's render function to the model's change event so whenever model's data is changed it is updated in the user interface view layer. So basically if a change occurs in the model each view can be updated independently, and therefore this process does not reload the entire page and therefore improves response time.

There are various methods in the Backbone.js view class we can take the reference below:

constructor/initialize: It is a method under the view class that is used to initialize a view and also to act as a constructor to assign default values to the object of the class.
el: It is a way to describe the reference on the view so that element can be rendered there.
$el: It is a method to represent a jQuery object on the view. It prevents the rewrapping of the Dom elements.
setElement: It is used to define an existing dom element with a different dom element in simple words it is used for dom manipulation.
attributes: It is used to set the attributes which can be set as the HTML DOM element, on the el section of the view.
$ (jQuery): It is used to run jQuery commands inside backbone.js that provides a selector "$" to run jquery queries inside the view of the backbone
.template: when we render the view, this method helps by creating duplicate re-usable copies with the access to instance data.
render: It is used to render HTML DOM content on the view of the backbone.js.
remove: It is used for removing any content from the view section of the backbone.
events: It is used for responding to the interaction made by the user, it uses click events to handle click events and many other types of events like a scroll, etc.
delegateEvents: It provides callback events to handle events specific to elements bound to DOM.
undelegateEvents: It is used for clearing the view section from any delegate events present in the view.

Implementing backbone.js view class by extending method:

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:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>What is a View in Backbone.js?</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>

        // Here we are extending the backbone.js 
        // view class to create a custom class
        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
                    inside view class
                      </h2 >`);
            }
        });

        function invoke() {

            // Here we are creating the object of the 
            // custom view class name example
            var obj = new example();
        }
    </script>
</body>

</html>

Output:

Example 2:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>What is a View in Backbone.js?</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>

        // Here we are extending the backbone.js 
        // view class to create a custom class
        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
                    inside view class
                      </h2 >`);
            }
        });

        function invoke() {

            // Here we are creating the object of the 
            // custom view class name example
            var obj = new example();
        }
    </script>
</body>

</html>

Output:

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

What is Backbone.js ?

yarudalbasharmacse17

Improve

Article Tags :

What is a View in Backbone.js ?

Similar Reads

Thank You!

What kind of Experience do you want to share?