Introduction
Welcome to the "Demonstrating Backbone.js" article series. This article demonstrates how to create and use a View in Backbone.js. This article starts with the concept of Backbone.js and various components of it. Previous articles have provided an introduction to views and the implementation of views. You can get them from the following:
This article explains Underscore Templates and their implementation in Views.
Templates are essentially pieces of markup that we can use to create a wide variety of reusable copies of that markup (including all the styles and hierarchy that we want).
_underscore Template
Here we will use the builtin option provided by Underscore.
In the following snippet there is a single <div> with the id of “containter1″. This is where the results will be appended to.
We have created a template1 variable. This variable is set to the string “Xperia: Sony″.
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.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script src="backbone/Jquery.js"></script>
<script src="backbone/underscore-min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="container1">
</div>
<script>
var template1 = "Xperia: Sony";
var compileTemplate1 = _.template(template1);
$("#container1").append(compileTemplate1());
</script>
</form>
</body>
</html>
Output
![Underscore Template]()
Summary
In this article, I explained how to use the _underscore template In future articles we will understand more about templates in views with examples.
Previous article: Demonstrating Backbone.js: Implement View Part 4