Post
Ask Question

Learning Backbone.js: Templates

Introduction

This article explains the backbone template. This tutorial explains the use of the template without using backbone.js scripts, the template is not a part of backbone.js, it is only a component that uses views in backbone.js. It provides a basic understanding of the template. A View in backbone.js is the key object. Backbone.js views cannot be simulated with the sever-side view. Sometimes users describe the view similar as a controller on the server-side. The working of the template on the client side is more similar to views on the server-side.

In this tutorial there is the simple description of the template, we use simple steps to learn about the template. Here we use only two JavaScript files, "jquery-1.7.2.js" and "underscore.js". Here we will not use the "backbone.js" script file.

Now let's use the template.

  1. First we need to create the web application as in the following:
  • 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.
  1. Now add the HTML Page to the project:
  • In the Solution Explorer.
  • Right-click on the project and select "Add" -> "HTML Page".

Add HTML Page

  • Change the name.

Change Name

  • Then click on the "OK" button.

Add the following code:Template without any substitutions.

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

</head>

<body>

    <div id="main"></div>

    <script type="text/javascript">

        var value = "City: Delhi";

        var firstvalue = _.template(value);

        $("#main").append(firstvalue());

    </script>

</body>

</html>

In the preceding example it has a single <div> that has the id "main". In the script code the variable "value" is defined that contains a string  "City:Delhi", this is the simple template. We will not add a substitutions to this template.

Now we will define another variable "firstvalue" that complied a function. That is defined later. Finally we will use jQuery to hold the value of the <div> with the id "main", and append this value with the function firstvalue().

Execute the application as in the following:

Simpletemplat

Template with substitution

Add the following script code to the application.

<div id="main1"></div>

    <script type="text/javascript">

        var val = { city: "Noida" }

        var value2 = "City:<%=city%>";

        var secondvalue = _.template(value2);

        $("#main1").append(secondvalue(val));

    </script>

In the code above here we create a new variable "val" that is passed when the "secondvalue()" function executes. The variable "val" is defined as a data object that contains a property "city" and this property holds the value "Noida".

We create a template that has a variable "city", it is enclosed by the "<%=...%>" tags. We can say that the "city" property of the data object "val" is the same as the variable "city" in the template. When we invoke the "secondvalue" then we pass the "val" variable to it. In the output we can see that the value in the "val" is substituted with the variable in the template.

Execute the application as in the following:

substitudetemplate

Template using Non-Inline

In the previous examples we can see that there is the template that is part of the JavaScript code. Here owever we will extract the template from the script code.

Add the following code:

<div id="main2"></div>

    <script type="text/template" id="temp">

       "City: <%=city%>"

    </script>

    <script type="text/javascript">

        var val1 = { city: "Gurgao" }

        var temp=$("#temp").html();

        var thirdvalue = _.template(temp);

        $("#main2").append(thirdvalue(val1));

    </script>

In the preceding example we can see that we extracted the template from the script code. We use the script type="text/template" for creating the template. And define the  id of it as "temp". Here we will also use the jQuery that finds the element with the "id" of the template "temp". It assigns the string value to the variable "temp".

Now we will see the output as in the following:

Noninlinetemplate

We can see all the output together as in the following:

Alltemplate


Similar Articles