[转]backbone.js template()函数

本文转自：http://book.2cto.com/201406/43974.html

本文所属图书 > Backbone.js实战

资深Web开发专家根据Backbone js最新版本撰写，对它的所有功能、特性、使用方法和开发技巧进行了全面而透彻的讲解，是系统学习的权威参考书。本书以一种开创性的写作方式，使理论与实践达到了极好的平衡。不仅对立即去当当网订购

在Underscore库中，template()是一个十分重要的函数，这个轻量级的函数可以帮助开发人员有效地组织页面的结构和底层逻辑。该函数可以解析3种模板标签，分别如表2-2所示。

表2-2　template()函数模板标签模板标签功能描述 <% %> 标签中包含的通常是JavaScript代码，在页面渲染数据时被执行 <%= %> 标签中包含的通常是变量名、函数名、对象属性，执行时直接展现调用后的数据 <%- %> 标签在输出数据时，能将HTML标记转成常用字符串形成，以避免代码的攻击

template()函数的调用格式如下。 _.template(templateString, [data], [settings])

其中，参数templateString就是模板标签，可选参数data为渲染标签的数据，可选参数settings为自定义模板标签的字符格式，比如可以将<%　%>修改为{%　%}格式，接下来通过简单的示例逐一进行介绍。

1. <% %>模板标签

<% %>在template()函数中使用时，在它包含处可以执行任意的JavaScript代码，同时允许在调用template()函数时使用对象属性的方式传递参数值。示例如下。 var tpl = _.template("<%console.log(str)%>"); tpl({ str: '姓名：陶国荣' });

在上述代码中，首先使用<% %>模板标签调用template()函数。在标签中，将通过控制台输出指定的任意字符，然后执行tpl函数，执行时使用对象属性的方式向标签中的形参变量赋值。最终在Chrome浏览器的控制台输出的效果如图2-30所示。

2. <%= %>模板标签

与<% %>模板标签不同，<%= %>模板标签可以直接显示变量或函数的结果。它的功能是输出数据，而不是执行。因此，如果想使用<%= %>模板标签实现与图2-30同样的效果，代码修改如下。 var tpl = _.template("<%=str%>"); console.log(tpl({ str: '姓名：陶国荣' }));

上述代码中的tpl函数可以显示传入的任意字符内容，当在控制台输出该函数时，其实现的页面效果与图2-30完全一致。

3. <%- %>模板标签

<%- %>与<%= %>模板标签的功能基本相同，不同之处在于，<%- %>模板标签不仅可以输出变量或函数的结果，而且可以将结果中的HTML代码转成字符形式，以避免代码受到攻击。如果希望只返回字符串，使用<%- %>模板标签是一个不错的选择。示例如下。 var tpl = _.template("<%-str%>"); console.log(tpl({ str: "姓/'名'&：<陶>国荣" }));

在上述代码的输出结果中，添加一些任意的HTML格式代码，而当使用<%- %>模板标签输出这些内容时，其中的HTML代码会转成转义字符。它的转换标准与前面介绍的escape()函数一样，只是针对部分HTML代码进行替换，并不是全部。最终在Chrome浏览器的控制台输出的效果如图2-31所示。

示例2-1 <script>模板标签的使用

与上述三种模板标签都不相同，<script>模板标签是在HTML页面中进行声明的，声明的标志是将该标签的type属性值设置为“text/template”，即表示这是一个模板标签。在模板标签中，还可以添加<% %>和<%= %>标签来组织和布局页面的结构，然后调用template()函数，通过ID号绑定<script>模板标签，并将可选参数data的内容渲染到模板标签中对应的对象属性中，从而实现根据模板绑定数据的页面效果。接下来通过一个示例进行详细介绍。

1. 功能描述

在页面中，首先使用<script>标签的方式自定义模板；然后创建一个数据源，调用template()函数解析模板，并将数据源填充至模板中并返回填充后的模板内容；最后将填充后的模板内容追加到页面的渲染元素内，从而最终实现根据自定义模板展示数据的功能。

2. 实现代码

新建一个HTML文件tpl.html，加入如代码清单2-1所示的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <title>template自定义模板</title>
     <script src="Js/jquery-1.8.2.min.js"
             type="text/javascript"></script>
     <script src="Js/underscore-min.js"
             type="text/javascript"></script>
     <style type="text/css">
        body{ font-size:13px;}
        ul{ list-style-type:none;
           padding:0px;margin:0px;width:360px }
        li:first-child span{ float:left;
           border-bottom:solid 1px #ccc;background-color:#eee;
           font-weight:bold }
        ul li span{ width:80px;text-align:left;float:left;
           padding:0px 5px;border-bottom:dashed 1px #ccc;
           line-height:28px;}
     </style>
 </head>
 <body>
 <script type="text/template" id="tpl">
     <%  var intSumScore=0,intAveScore=0;
         for(var i = 0; i < list.length; i++) { %>
         <% var item = list[i] %>
         <li>
             <span><%=item.StuId%></span>
             <span><%=item.Name%></span>
             <span><%=item.Sex%></span>
             <span><%=item.Score%></span>
         </li>
         <%
            intSumScore+=parseInt(item.Score)
            intAveScore=intSumScore/list.length;
         } %>
         <li>
            <span>平均分：</span>
            <span><%=intAveScore%></span>
            <span>总分：</span>
            <span><%=intSumScore%></span>
         </li>
 </script>
 <ul id="element">
     <li>
        <span>学号</span>
        <span>姓名</span>
        <span>性别</span>
        <span>总分</span>
     </li>
 </ul>
 <script type="text/javascript">
     var ele = $('#element'),
         tpl = $('#tpl').html();
     var data = {
         list: [
             { StuId: 's0101', Name: '刘小明',
               Sex: '男', Score: '345' },
             { StuId: 's0102', Name: '李清燕',
               Sex: '女', Score: '445' },
             { StuId: 's0103', Name: '张二保',
               Sex: '男', Score: '355' },
             { StuId: 's0104', Name: '陈明基',
               Sex: '男', Score: '564' },
             { StuId: 's0105', Name: '舒明珠',
               Sex: '女', Score: '543' }
         ]
     }
     var html = _.template(tpl, data);
     ele.append(html);
 </script>
 </body>
 </html>

3. 页面效果

执行代码后的效果如图2-32所示。

4. 源码分析

HTML页面代码由三部分组成：第一部分是<script>元素的模板标签，第二部分是页面中用于渲染填充数据的元素，第三部分是编写JavaScript代码、创建数据、绑定模板、渲染数据。接下来我们逐一进行介绍。

1）在<script>元素的模板标签中，分别使用<%　%>、<%=　%>标签来执行代码和显示数据，在执行代码时，先定义了两个变量，用于保存数据中的总分数和平均分数值，然后使用for语句遍历填充数据的数组对象list。在遍历过程中，使用<%=　%>标签直接显示对象中的各项元素，同时计算总分数和平均分数值，最后将获取的这两项数值使用<%=　%>标签的方式直接显示在<span>元素中。

2）在页面渲染元素ID号为“element”的<ul>元素中，先添加一个<li>元素，用于填充数据的标题部分，全部的填充数据通过追加的方式添加至该元素中。

3）在页面的JavaScript代码部分，首先定义两个变量ele和tpl，分别用于保存页面的渲染元素和模板内容；然后创建一个数据对象data，这个对象也可以通过请求服务端的数据接口进行返回；调用template()函数解析模板，并将创建的数据对象填充至模板中，同时，执行该函数后，返回一个数据填充至模板后的内容；最后，通过append()方法将该内容追加到页面的渲染元素中，最终实现通过template()函数绑定并显示的页面效果。