Even though templates are not part of Backbone.js, I believe it’s critical to have a basic understanding of templates. Templates are a core component that will be used with Backbone.js Views.
Templates will help us separate code from the HTML markup. When MVC is discussed in regards to server side (Ruby on Rails, ASP.NET MVC) the “V” is for view. Views are implemented different in Backbone than in most server side technologies. On the server side, views should be extremely dumb and very little logic if any should be include.
Backbone.js has a key object called View. The Backbone.js View does not resemble server side views. Backbone.js Views are not dumb and they do have logic. Some people have described Backbone.js Views as being more similar to Controllers on server side. I believe that templates on the client (JavaScript) side work more like the views on the server side. It’s definitely a mind shift when moving from a server MVC mindset to a client side MVC mindset. Hopefully this will make the transition easier.
I want to keep this as simple as possible. We will take very small steps to help you learn about templates. Only 2 JavaScript libraries will be needed, jQuery and Underscore. We will not be using the Backbone.js library. There are many options for templating, but we will use the built in option that Underscore provides. In case you didn’t know, Backbone.js has a dependency on Underscore. This is why we are using Underscore’s template engine, but other template engines can be substituted for the Underscore template engine.
Very, Very Simple Template
<html>
<head>
<title></title>
<script src="scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script src="scripts/underscore.js" type="text/javascript"></script>
</head>
<body>
<div id="container1"></div>
<script type="text/javascript">
var template1 = "Title: Title1";
var compileTemplate1 = _.template(template1);
$("#container1").append(compileTemplate1());
</script>
</body>
</html>
In the previous code we have a reference to jQuery and Underscore.
There is a single <div> with the id of “containter1”. This is where the results will be appended to.
On the first line of the JavaScript we create a template1 variable. This variable is set to a string “Title: Title1”. This template is extremely simple. With this template we will not do any substitutions.
On the next line we created another variable called compileTemplate1. The template is compiled to a function that can be evaluated later.
On the last line of the JavaScript, we use jQuery to get the <div> element that has the id of “container1”. We then append the results of the function compileTemplate1.
Template using Substitution
In this next example we will substitute values.
<div id="container2"></div>
<script type="text/javascript">
var data2 = { title: "Title2" }
var template2 = "Title: <%=title%>";
var compileTemplate2 = _.template(template2);
$("#container2").append(compileTemplate2(data2));
</script>
So in this example we are passing in a variable (data2) when we execute the compileTemplate function.
So first we create a variable called data2. This variable is a data object with a property called title. The title property includes a value called “Title2”
We then create a template that includes a variable called title. The title variables in the template is surrounded by “<%= … %>”. So as you can tell, the title property in variable data2 is the same as the title variable in the template.
We compile the template the same as we did in the previous example. Nothing changed here.
Now when we call compileTemplate2, we pass in the variable data2. We can see in the results that the value in data2 was substituted with the variable in the template.
Template with Non-Inline
In our previous example the template was part of the JavaScript code. If the template was much longer it would been very difficult to understand and maintain. Now we are going to extract the template from the JavaScript code.
<div id="container3"></div>
<script type="text/template" id="template3">
Title: <%=title%>
</script>
<script type="text/javascript">
var data3 = {title:"Title3"}
var template3 = $("#template3").html();
var compileTemplate3 = _.template(template3);
$("#container3").append(compileTemplate3(data3));
</script>
Now in this example we extracted the template from the inline script. We can see this with the script that has the type “text/template” and the id of “template3”. Since the type is “text/template” the JavaScript engine will ignore anything within the script tags.
The second line in the JavaScript code will use jQuery to find the element with the ID of “template3” and assign the string to the variable template3. Now everything is the same as the previous example. And the results should be as expected.
That’s it for the most part.
There are a couple of things to keep in mind. The Underscore template can execute JavaScript code. You can include JavaScript “if” statements and such in the template. Just remember that templates should be fairly simple and business logic should not be included in the template. We want separation of concerns and templates should provide a very simple view.
For more information on Underscore Templates please see – http://underscorejs.org/#template
Also you can view the code using jsFiddle.net website at http://jsfiddle.net/BarDev/mGwBL/
BarDev - Archive 
Thanks a lot, you save my day/month/year/life !
Finally, I understand how these templates work. Thanks for the tutorial!
nice article.