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
<!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.
<!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>
