最近的项目中用到了jtemplate, 它是客户端基于javascript的模板引擎,绑定的数据为json对象。以前我在页面上显示数据列表时最喜欢用Repeater控件了,因为它相对与其它几个服务端控件是最轻量级了,而且布局也最灵活,不过它终究是服务端控件在性能上是有损失的,对于性能要求很高的站点,连它也不让用,那么开发人员通常的做法是在服务端把html代码生成好再一次性输出到客户端,这样性能是提高了一些但想想服务端一大堆的html代码又该头痛了。而现在有了jtemplate问题就能很完美的解决了,服务端只需要把对象集合序列化成json格式并传入客户端,客户端再把json对象填充模版生成列表,这样一服务端传输的只是json格式的字符串,传输的数据量可是大大减少了,二遍历绑定的工作转移到了客户端,大大减轻了服务端的压力。

上面说了它的好处,下面该说说怎么用它了,还是拿数据列表来举例吧。

1. 要使用jtemplate首先要引入两个js脚本文件:

<script type="text/javascript" src="Scripts/jquery.js"></script>
<script type="text/javascript" src="Scripts/jquery-jtemplates.js"></script>

需要注意的是,jtemplate是在jquery的基础上实现的,所以脚本的引入顺序不能颠倒,否则会报错。

这些脚本可到http://jtemplates.tpython.com/去下载。

2. 然后建模版:

<!-- 结果容器 -->
 <div id="result_container"></div>

<!-- 模版内容 -->
 <textarea id="template-items" style="display:none">

  <table border="1" style="border-collapse:collapse">

<tr><th>姓名</th><th>邮箱</th><th>生日</th></tr>
     {#foreach $T as item}
   <tr>
      <td>{$T.item.name}</td>
      <td>{$T.item.mail}</td>
          <td>{$T.item.birthday}</td>
   </tr>
   {#/for}
  </table>
 </textarea>

这就是jtemplate模版的格式,模版内容是放在textarea里的,而关键字和数据是用大括号包起来的,并且以$T表示数据,关键字以#作为开始标记。

3. 用json数据填充模板并展示

<script type="text/javascript">
        var data = [{ name: 'Anne', birthday: '2001-01-01', mail: 'anne@domain.com' },
     { name: 'Amelie', birthday: '2002-02-02', mail: 'amelie@domain.com' },
     { name: 'Polly', birthday: '2003-03-03', mail: 'polly@domain.com' },
     { name: 'Alice', birthday: '2004-04-04', mail: 'alice@domain.com' },
     { name: 'Martha', birthday: '2005-05-05', mail: 'martha@domain.com'}]
        // 设置模版
        $("#result_container").setTemplateElement("template-items");

// 填充数据并展示
        $("#result_container").processTemplate(data);

   //这里也可以写成$("#result_container").setTemplateElement("template-items").processTemplate(data);
    </script>

这样就算完成了,一个数据列表就呈现出来了:

5. 模版中调用javascript

在{}里你是可以随意写javascript脚本的,如生日我想换种格式显示,显示成2001/01/01,那么我们可以把模版中的{$T.item.birthday}改成{$T.item.birthday.replace(/-/g,'/')},然后刷新下效果如下:

当然也可以把它包装成方法来调用,如先定义js方法:

function formatDate(date) {
            return date.replace(/-/g,'/');
        }

再把模版改成{formatDate($T.item.birthday)}就可以达到一样的效果了。

6. 如何在模版中包含textarea输入框

jtemplate的模版内容是放在textarea里面的,可是有时我们要在模版里包含textarea, 有两种方法可以实现:

  1)注释模版中的内容,如模版改成:

     <!-- 模版内容 -->
 <textarea id="template-items" style="display:none">
    <!--
        <table border="1" style="border-collapse:collapse">
      <tr><th>姓名</th><th>邮箱</th><th>生日</th><th></th></tr>
   {#foreach $T as item}
   <tr>
    <td>{$T.item.name}</td>
    <td>{$T.item.mail}</td>
                <td>{$T.item.birthday}</td>
                <td><textarea rows="2" cols="10"></textarea></td>
   </tr>
   {#/for}
  </table>
        -->
 </textarea>

  在IE下的效果如下图:

但在其它浏览器下(本人测试过的浏览器有360,谷歌,火狐)却显示不出来。

2)移除注释并使用特殊符号的编码表示包含的textarea中的特殊标签

如把<textarea rows="2" cols="10"></textarea>替换成&lt;textarea rows="2" cols="10"&gt; &lt;/textarea&gt;

这样这些主流浏览器都能正常显示了。

jemplate支持大于号>和小于号<的编码,但却不支持大括号{}的编码,比如想在模版中使用my97datepicker日期控件,

<input id="d11" type="text" onclick="WdatePicker({el:$dp.$('d12')})" />

它的参数是一个json对象是有大括号的,如果直接这样放入模版中是得不到想要的效果的,但也有变通的方式,如把onclick事件写到模版外面去

7. 上面举得列子是如何使用jtemplate绑定一个简单的数据列表,但其实jtemplate可以绑定任意json对象,以及还有很多使用方法,大家可以通过http://jtemplates.tpython.com/去了解

jtemplate使用笔记的更多相关文章

  1. git-简单流程(学习笔记)

    这是阅读廖雪峰的官方网站的笔记,用于自己以后回看 1.进入项目文件夹 初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 第一步,使用命令git add <file ...

  2. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  3. SQL Server技术内幕笔记合集

    SQL Server技术内幕笔记合集 发这一篇文章主要是方便大家找到我的笔记入口,方便大家o(∩_∩)o Microsoft SQL Server 6.5 技术内幕 笔记http://www.cnbl ...

  4. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  5. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  6. NET Core-学习笔记(三)

    这里将要和大家分享的是学习总结第三篇:首先感慨一下这周跟随netcore官网学习是遇到的一些问题: a.官网的英文版教程使用的部分nuget包和我当时安装的最新包版本不一致,所以没法按照教材上给出的列 ...

  7. springMVC学习笔记--知识点总结1

    以下是学习springmvc框架时的笔记整理: 结果跳转方式 1.设置ModelAndView,根据view的名称,和视图渲染器跳转到指定的页面. 比如jsp的视图渲染器是如下配置的: <!-- ...

  8. 读书笔记汇总 - SQL必知必会(第4版)

    本系列记录并分享学习SQL的过程,主要内容为SQL的基础概念及练习过程. 书目信息 中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL i ...

  9. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

随机推荐

  1. 复制带有random指针的单链表

    如图1所示,有一条单链表,其节点除了有next指针外,还有一个random指针.random指针可指向单链表中的任意节点,包括它自身.random指针一旦指定,便不再更改.请设计算法,复制此单链表,并 ...

  2. SPOJ - OTOCI LCT

    OTOCI Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/problem/viewProblem. ...

  3. Android adt v22.6.2-1085508 自己主动创建 appcompat_v7 解决方法,最低版本号2.2也不会出现

    Android 开发工具升级到22.6.2在创建project时仅仅要选择的最低版本号低于4.0,就会自己主动生成一个项目appcompat_v7,没创建一个新的项目都会自己主动创建,非常是烦恼... ...

  4. Lazy Load 图片延迟加载(转)

    jQuery Lazy Load 图片延迟加载来源 基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载. 对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度. ...

  5. [Effective C++ --024]若所有参数皆需类型转换,请为此采用non-member函数

    引言 假设我们有这样的类: class A{ public: A(, ) {}; int num() const; int den() const; const A operator* (const ...

  6. IT软件开发 书籍汇总

    数据库: MYSQL ->  Effective MySQL 之 SQL 语句最优化   [美] Ronald Bradford 著 李雪锋 译 清华大学出版社 开发书籍 PHP核心技术与最佳实 ...

  7. ajax检查用户名

    Ajax实现的效果 究竟Ajax能实现什么功能呢?今天下午学习了一下Ajax,现在跟大家分享一下我的学习心得.Ajax是什么?工作机制又是什么?可能不大准确,只是我个人看了视频学习后的一点点看法. A ...

  8. javascript 标签 src 链接动态文件。

    test.html中的代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  9. fedora 23中配置nfs-server

    fedora 23中配置nfs-server */--> fedora 23中配置nfs-server Table of Contents 1. 产考资料 2. NFS配置文件 2.1. /et ...

  10. [转]ASP.NET MVC中你必须知道的13个扩展点

    本文转自:http://www.cnblogs.com/ejiyuan/archive/2010/03/09/1681442.html ScottGu在其最新的博文中推荐了Simone Chiaret ...