Backbone.js Rendering

Last Updated : 23 Aug, 2022

Backbone.js uses MVC Architecture for handling user interface, data modeling, and business logic separately. Each entity in MVC architecture is separated from the other, so when business logic is not dependent on the user interface, it becomes easier to work with the user interface.
For rendering the purpose view is used in backbone.js, where each view can manage its own rendering and interaction with a user by manipulating its own DOM element. Rendering in backbone.js is isolated in every view.

The architecture of backbone.js:

For rendering on the view layer of backbone.js, we need to extend a custom view class and then call the render method for rendering content for user interaction.

Syntax:

view.render()

Parameters:

view: The view is a class inside the backbone.js library.
render(): It is a method which is part of the view class and used to render HTML content on the view layer of the application.

Example 1:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Backbone.js Rendering</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> 
    <style> 
        h1 { 
            text-align: center; 
        } 
  
        .clk { 
            text-align: center; 
            border: 5px solid black; 
            height: 200px; 
            width: 500px; 
            margin-left: 200px; 
        } 
  
        button { 
            font-size: 30px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="clk"> 
        <h1>Backbone js rendering</h1> 
        <button onclick="invoke()">render</button> 
    </div> 
  
    <script type="text/javascript"> 
        var example = Backbone.View.extend({ 
  
            initialize: function () { 
                this.render(); 
            }, 
            render: function () { 
                window.alert("rendering") 
                document.write(`<h1 
                    style = "color:green; font-size:40; 
                       text-align: center;  
                    border: 5px solid black; 
                    height: 200px; width: 500px;  
                    margin-left: 200px; "> 
                    GeeksforGeeks 
                  </h1 >`); 
            } 
        }); 
        function invoke() { 
            var object = new example(); 
        }   
    </script> 
</body> 
  
</html>

Output:

Example 2:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Backbone.js Rendering</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> 
    <style> 
        h1 { 
            text-align: center; 
        } 
  
        #display { 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="text-align:center;"> 
          Backbone rendering 
      </h1> 
      
      <div id="display"></div> 
      
      <script type="text/javascript"> 
        var example = Backbone.View.extend({ 
            el: $('#display'), 
            template: _.template("HELLO <%= data %>"), 
            initialize: function () { 
                this.render(); 
            }, 
            render: function () { 
                document.write( 
                      `<h1 style="color:green;"> 
                        GeeksforGeeks 
                      </h1>`); 
                this.$el.html(this.template({  
                      data: ' WORLD!!'  
                })); 
            } 
        }); 
        var object = new example();   
    </script> 
</body> 
  
</html>