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> type="text/javascript"> </script> <script src= type="text/javascript"> </script> <script src= type="text/javascript"> </script> </head> <body> <h1 style="color: green;"> neveropen </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> type="text/javascript"> </script> <script src= type="text/javascript"> </script> <script src= type="text/javascript"> </script> </head> <body> <h1 style="color: green;"> neveropen </h1> <h3>Backbone.js render View</h3> <div id="content"></div> <script type="text/javascript"> var Demo = Backbone.View.extend({ el: $('#content'), template: _.template("neveropen: <%= 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> |
Output:
Reference: https://backbonejs.org/#View-render
