Introduction
In this article we will learn about various ways to render HTML using Backbone.js View and use the underscore templates. Here we create a view that includes a render function. The responsibility of this function is to manupulate the "el" property of the view, this el property updates the DOM.
Now we will create an application that uses the various ways.
- First we need to create the web application:
- Start Visual Studio 2013.
- From the Start window select "New Project".
- Select "Installed" -> "Template" -> "Visual C#" -> "Web" -> "Visual Studio 2012" and select "ASP.NET Empty Web Application".
![Create Web Application]()
- Click on the "OK" button.
- Now add the HTML Page to the project:
- In the Solution Explorer.
- Right-click on the project and select "Add" -> "HTML Page".
![Change Name]()
- Then click on the "OK" button.
Use the following to add some text to the DOM div element.
<html>
<head>
<title></title>
<script src="js/jquery-1.7.2.js" type="text/javascript"></script>
<script src="js/underscore.js" type="text/javascript"></script>
<script src="js/backbone.js" type="text/javascript"></script>
</head>
<body>
<div id="hardwaremain"></div>
<script type="text/template" id="template-hardware">
Name: <%=name%>
</script>
<script type="text/javascript">
var Hardware = Backbone.Model.extend();
var HardwareView1 = Backbone.View.extend({
initialize: function () {
console.log("HardwareView initialize");
},
render: function () {
console.log("HardwareView render");
this.$el.append("Name: " + this.model.get("name"));
$("#hardwaremain").html(this.$el.html());
return this;
}
})
$(function () {
var hardware = new Hardware({ name: "Keyboard" });
var hardwareView1 = new HardwareView1({ model: hardware });
hardwareView1.render();
})
</script>
In the code above we define the render function. Here the render function produces the standardization, so it will override the render function in the view. In this render function we add a string "Name" and add the value to the property "el" of the view in the model. Now we add the jQuery for finding the element with the id of the div "#hardwaremain" in the DOM, assign the HTML of "el" to the element.
Now see the output.
![passvalue inDiv]()
The following is the example for the template.
<body>
<div id="hardwaremain"></div>
<script type="text/template" id="template-hardware">
Name: <%=name%>
</script>
<script type="text/javascript">
var Hardware = Backbone.Model.extend();
var HardwareView1 = Backbone.View.extend({
template:_.template($("#template-hardware").html()),
initialize: function () {
console.log("HardwareView initialize");
},
render: function () {
var htmlOutput = this.template(this.model.toJSON());
this.$el.html(htmlOutput);
return this;
}
})
$(function () {
var hardware = new Hardware({ name: "Keyboard" });
var hardwareView1 = new HardwareView1({ model: hardware,el:$("#hardwaremain") });
hardwareView1.render();
})
</script>
In this example we will create a template. Here we use the type "text/template". Notice that we instantiate the hardwareView1 and pass in the "el", and this "el " specifies to the div "hardwaremain" that we want to update.
There creates a template property in the view that creates the compiled version of the template. Now we will pass the model data to the template function defined in the render function and it will return the HTML result.
The following is the result:
![passtemplatevalue]()
The following is the example of passing the template for creating harwareView1:
<script type="text/javascript">
var Hardware = Backbone.Model.extend();
var HardwareView1 = Backbone.View.extend({
renderCount: 0,
initialize: function (options) {
console.log("HardwareView initialize");
this.template=_.template(options.template.html());
this.render();
},
render: function () {
this.renderCount += 1;
console.log(this.renderCount);
var htmlOutput = this.template(this.model.toJSON());
this.$el.html(htmlOutput);
return this;
}
});
$(function () {
var hardware = new Hardware({ name: "Keyboard" });
var hardwareView1 = new HardwareView1({ model: hardware, el: $("#hardwaremain"),
template:$("#template-hardware")
});
hardwareView1.render();
hardwareView1.render();
hardwareView1.render();
})
In this example we will invoke the render view multiple times so we use the renderCount property for tracking the number of times. When we create an object based view then we pass the something in the template. In this example the template is not a property that is automatically merged by backbone, so there is a need for"options" in the initialize. In the initializer we need to compile the template and then it is assigned to the template.
The following is the result:
![viewinitialize]()
The following is a modification of the render function:
$(function () {
var hardware = new Hardware({ name: "Keyboard" });
var hardwareView1 = new HardwareView1({ model: hardware, el: $("#hardwaremain"),
template:$("#template-hardware")
});
hardwareView1.render().$el.append(" -It necessary Hardware for Computer System");
})
In this example we will change the result of the render function.
The following is the result:
![AddNewPropertyofhardware]()