本文转自：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. ASP.NET程序中常用的三十三种代码

    1. 打开新的窗口并传送参数: 传送参数: response.write("<script>window.open(’*.aspx?id="+this.DropDown ...

  2. html5音频和视频标签

    在html5之前的版本中如果想要在网页中插入音频和视频必须要安装插件才可以,比如最常见的flash插件.很多人在刚安装一款浏览器的时候都会遇到浏览器建议安装flash插件,在移动端也是如此.如果想要在 ...

  3. crm2013关于contentIFrame不能使用

    在CRM2011里面,我们可以在页面的控制台里面输入: contentIFrame.Xrm.Page.data.entity.getEntityName(); contentIFrame.Xrm.Pa ...

  4. Android闹钟 AlarmManager的使用

    Android闹钟 AlarmManager的使用 AlarmManager介绍 AlarmManager这个类提供对系统闹钟服务的访问接口. 你可以为你的应用设定一个在未来某个时间唤醒的功能. 当闹 ...

  5. Android上传图片到PHP服务器并且支持浏览器上传文件（word、图片、音乐等）

    暑假已经过了一半了,这才完成计划当中的第二个任务.虽然进度是慢了点.但也算是暑假的收获吧.下面我就把我学习当中的收获记录在此. 还是跟以往一样,先上图片. 操作的步骤:打开程序---->选择上传 ...

  6. AppCompatActivity实现全屏的问题

    前言:我的 Activity 是继承 BaseActivity , 而 BaseActivity 继承 AppCompatActivity . BaseActivity 的继承 /** * 应用程序的 ...

  7. Java中的两个关键字——super、this

    Java中的两个关键字——super.this 神话丿小王子的博客主页 一.super super 是java中方的一个关键字,用它可以引用父类中的成员: super可用于访问父类中定义的属性 sup ...

  8. 【代码笔记】iOS-iCarouselDemo

    一,效果图. 二,工程图. 三,代码. RootViewController.h RootViewController.m myCell.h #import <UIKit/UIKit.h> ...

  9. rabbitmq_management 安装失败

    安装rabbitmq_management的时候出现错误 不能连接rabbit,所以查看状态 看意思感觉好像是rabbit没有运行,但是安装的时候都是默认安装的,所以安装完以后服务的名字就是Rabbi ...

  10. nginx 的信号控制概述

    <nginx 在ubuntu 上的启动,停止,重启>中的停止和重启命令基本都是用信号来控制的.这是一些简单的信号控制. 在Nginx服务器中,通常情况都是通过对其发送控制信号进行控制的,除 ...