Backbone.js Rendering Last Updated : 23 Aug, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report 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> Output: Â Reference: https://backbonejs.org/#View-rendering Comment More infoAdvertise with us Next Article Backbone.js render View Y yarudalbasharmacse17 Follow Improve Article Tags : JavaScript Web Technologies Backbone.js Backbone.js-View Similar Reads Backbone.js render View 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, ro 2 min read Backbone.js js Routing Backbone.js is a compact library used to organize JavaScript code. Another name for it is an MVC/MV* framework. If you are not familiar with MVC, it's just a method for creating user interfaces. JavaScript functions make it much simpler to create a program's user interface. Models, views, events, ro 2 min read Backbone.js remove View Backbone.js is a compact library used to organize JavaScript code. An MVC/MV* framework is another term for it. If MVC is unfamiliar to you, it simply refers to a technique for designing user interfaces. The creation of a program's user interface is made considerably easier by JavaScript functions. 2 min read Backbone.js url Model The Backbone.js url Model is a function that is used to get the relative url where the model's resource would be located on the server. If the model is located somewhere else, override this method with the correct logic to get the model. General URLs are of the form of [ Collection.url]/[id]' but we 2 min read Backbone.js route Router Backbone.js route Router is a method that is used to create the route for the router manually. The argument of the route may be a routing string or regular expression and each capture string from the route is passed to the callback function of the route. Syntax:router.route( route, name, callback ); 2 min read Backbone.js sync Model Backbone.js sync Model is the function that the model calls every time it attempts to read or save a model to the server. When a model begins a sync with the server, a request event is emitted. If the request completes successfully you'll get a sync event and an error event if not. Syntax: model.syn 2 min read Like