Backbone.js render View

Last Updated : 02 Aug, 2022

Backbone.js is a compact library used to organize JavaScript code. Another name for it is an MVC/MV* framework. If MVC isn’t familiar to you, it merely denotes a method of user interface design. JavaScript functions make it much simpler to create a program’s user interface. Models, views, events, routers, and collections are among the building blocks offered by BackboneJS to help developers create client-side web applications.

View’s Render function is primarily used to create the basic framework for a view and how it will be shown. This function is used to execute some logic that is used to render the template which will construct the view.

Syntax:

view.render()

Example 1: The code below demonstrates how

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Backbone.js template View</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> 
  
    <h3>Backbone.js render View</h3> 
    <div id="content"></div> 
  
    <script type="text/javascript"> 
        var Demo = Backbone.View.extend({ 
            el: $('#content'), 
            initialize: function () { 
                this.render() 
            }, 
            render: function () { 
                console.log(this.el), 
                    this.$el.html( 
                        "The $el variable here is: "  
                        + this.el); 
            }, 
        }); 
  
        var myDemo = new Demo();   
    </script> 
</body> 
  
</html>

Output:

Example 2: The code below demonstrates how to process markup from a template in a view using the Render function.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Backbone.js template View</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> 
  
    <h3>Backbone.js render View</h3> 
    <div id="content"></div> 
  
    <script type="text/javascript"> 
        var Demo = Backbone.View.extend({ 
            el: $('#content'), 
            template: _.template("GeeksforGeeks: <%= line %>"), 
            initialize: function () { 
                this.render(); 
            }, 
  
            render: function () { 
                this.$el.html(this.template({ line:  
                    'A Computer Science portal for Geeks!!' })); 
            } 
        }); 
  
        var myDemo = new Demo();   
    </script> 
</body> 
  
</html>