本文转自：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()函数绑定并显示的页面效果。

[转]backbone.js template()函数的更多相关文章

  1. 使用Underscore.js的template将Backbone.js的js代码和html代码分离

    这段时间在学习Require.js和Backbone.js的过程中,发现有些项目里的HTML代码都是写在View的js代码里面的,渲染的时候需要对Collection进行循环,再将HTML代码拼接上去 ...

  2. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  3. Backbone.js学习之Backbone.View（视图）

    Backbone.js为复杂WEB应用程序提供模型(models).集合(collections).视图(views)的结构.其中模型用于绑定键值数据和自定义事件:集合附有可枚举函数的丰富API: 视 ...

  4. 前端mvc框架backbone.js入门[转]

    原文地址:http://www.cnblogs.com/zhjh256/p/6083618.html 关于backbone.js的优缺点,这里就不详谈了,网上关于这方面的讨论很多了,而且各种框架之所以 ...

  5. 前端mvc框架backbone.js入门

    关于backbone.js的优缺点,这里就不详谈了,网上关于这方面的讨论很多了,而且各种框架之所以长久生存,通常都是有其特定优势和擅长点的. 使用backbone.js作为前端框架的应用通常都是htm ...

  6. [转]Backbone.js简单入门范例

    本文转自:http://dmyz.org/archives/598 11年刚开始用前端MVC框架时写过一篇文章,当时Knockout和Backbone都在用,但之后的项目全是在用Backbone,主要 ...

  7. 用Backbone.js创建一个联系人管理系统(一)

    原文 Build a Contacts Manager Using Backbone.js: Part 1 在这个教程里我们将会使用Backbone.js,Underscore.js,JQuery创建 ...

  8. [backbone] Getting Started with Backbone.js

    一.简介 Backbone 是一个 JavaScript MVC 框架,它属于轻量级框架,且易于学习掌握.模型.视图.集合和路由器从不同的层面划分了应用程序,并负责处理几种特定事件.处理 Ajax 应 ...

  9. Backbone.js学习之View

    千呼万唤始出来,终于到最后一个要点View了.照旧,先来一睹官方文档: Backbone views are almost more convention than they are code - t ...

随机推荐

  1. IO碰到的问题

    1.流关了,并不代表流对象为空 可是java并没提供查看流是否关闭的方法 不过如果流已经关闭了以后,再对流进行操作的话,会抛出IOException:Stream closed异常 可以根据这个异常来 ...

  2. 粒子动画Particleground.js

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. Medoo个人修改版

    Medoo是一款轻量级的php数据库操作类,下面不会介绍Medoo的使用方法,想学习Medoo请前往官网自学:http://medoo.in/ 在接触Medoo之前,一直是用自己写的php数据库操作类 ...

  4. WPF钟表效果实现

    WPF在样式定义和UI动画上面相对于以前的技术有了不少的提升,下面给出WPF技术实现钟表的效果: 1.Visual Studio新建一个WPF应用程序,命名为WpfClock,新建一个images文件 ...

  5. hibernate 入门（[数据访问中间件] 开源框架）

    1.内容:  hibernate 也是一个经典的[数据访问中间件] 开源框架.    2.hibernate核心组件       SessionFactory[整个数据的操作]重量级组件       ...

  6. javascript对象初探（一）--- 构造器函数

    我们可以通过构造器函数(简称构造函数)来创建对象: function Her(){ this.child = 'Jon'; } 为了使用该函数来创建对象,我们需要使用new操作符,例如: var sh ...

  7. Web前端面试题目汇总

    以下是收集一些面试中经常会遇到的经典面试题以及自己面试过程中有一些未解决的问题,通过对知识的整理以及经验的总结,重新巩固自身的前端基础知识,如有错误或更好的答案,欢迎指正,水平有限,望各位不吝指教.: ...

  8. VirtualBox & Kaili Linux 环境搭建

    勾选启用PAE/NX 勾选固态驱动器 网卡设置 [添加源] 2016.1月版添加源 cat << EOF > /etc/apt/sources.list deb http://htt ...

  9. 通过Map 3D API读取线状要素的节点坐标

    By Daniel Du 在Map 3D中可以使用Create from Geometry命令把AutoCAD实体转换成Map 3D中的FDO要素,比如可以把AutoCAD的polyline转换成FD ...

  10. SharePoint:WebPartPageUserException This page has encountered a critical error

    遇到如下webpart莫名错误,很常见吧.一般用户是直接删掉,知道原因的不算太多. 解决办法(Solution): Usually, This error caused by wrong entrie ...