动态请求数据来更新页面是现在非常常用的方法，比如博客评论的分页动态加载，微博的滚动加载和定时请求加载等。

这些情况下，动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML，总之不在浏览器端拼数据就在服务器端拼数据。不过，从传输量方面来看，返回 HTML 不划算，而在 web 传输方面，现在更多的是使用 JSON 而不是 XML。

浏览器端根据 JSON 生成 HTML 有个很苦恼的地方就是，结构不复杂的时候还好，结构一复杂，就想死了，需要很小心很小心地写出几乎无法维护的 JavaScript 代码。

如同为解决 PHP 拼数据这方面的问题而有了 Smarty 这些模版，JavaScript 也可以利用模版来解决这些问题，比如基于 jQuery 的 jquery.tmpl，现在已经被接受为官方的模版插件了。详细的 API 在 jQuery 的 Templates 里，内置的 demo 也尽情地演示了各种用法。

就我自己的几次使用，感觉很不错，用更加直观方面的 HTML 写法而不是 JavaScript 拼凑 来写结构，然后用 JSON 变量来占位的方式来填充数据，代码看起来好多了。

来源： http://liunian.info/jquery-tmpl.html

Tmpl提供了几种tag：
${}：等同于{{=}}，是输出变量，通过了html编码的。 {{html}}:输出变量html,但是没有html编码，适合输出html代码。 {{if }} {{else}}:提供了分支逻辑。 {{each}}:提供循环逻辑，$value访问迭代变量。

jquery tmpl的使用方法：

模板定义：

方法一:

  1.  <script id="movieTemplate" type="text/x-jquery-tmpl">
  2.  <li>
  3.  <b>${Name}</b> (${ReleaseYear})
  4.  </li>
  5.  </script>

方法二:

  1.  function makeTemplate(){
  2.  var markup=’<li><b>${Name}</b> (${ReleaseYear})</li>‘;
  3.  $.template(“movieTemplate”, markup);
  4.  }

DATA:

  1.  var movies = [
  2.  { Name: "The Red Violin", ReleaseYear: "1998" },
  3.  { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
  4.  { Name: "The Inheritance", ReleaseYear: "1976" }
  5.  ];

Script:

  1.  $( "#movieTemplate" ).tmpl( movies )
  2.  .appendTo( "#movieList" );

实例一:

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  5.    <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
  6.  </head>
  7.  <body>
  8.  
  9.      <ul class="param-list"></ul>
  10.  
  11.      <script type="text/x-jquery-tmpl" id="new-param-tmpl">
  12.          <li rel="${num}">
  13.              <input type="text" name="key[${num}]" value="${key}" placeholder="key" /> =
  14.              <input type="text" name="value[${num}]" value="${value}" placeholder="value" />
  15.              <button type="button" class="button small remove-param"><img src="http://mediacdn.disqus.com/1338845651/images/v3/icon/16/69.png" height="12" alt=""/></button>
  16.              <button type="button" class="button small add-param"><span><img src="http://mediacdn.disqus.com/1338845651/images/v3/icon/16/13.png" height="12" alt=""/></button>
  17.          </li>
  18.      </script>
  19.  
  20.      <script>
  21.          $(function(){
  22.              function addParam(key, value) {
  23.                  var param_list = $('.param-list');
  24.                  var num = param_list.find('li').length;
  25.  
  26.                  // build a template to clone the current row
  27.                  var built = $('#new-param-tmpl').tmpl({
  28.                      num: num,
  29.                      key: key || '',
  30.                      value: value || '',
  31.                  });
  32.                  if (key) param_list.prepend(built);
  33.                  else param_list.append(built);
  34.  
  35.                  param_list.find('li:not(:last) .add-param').hide();
  36.                  param_list.find('li:last .add-param').show();
  37.                  param_list.find('li:not(:last) .remove-param').show();
  38.                  param_list.find('li:last .remove-param').hide();
  39.              }
  40.  
  41.              // bind events
  42.              $('.param-list .remove-param').live('click', function(){
  43.                  $(this).parent().remove();
  44.                  return false;
  45.              });
  46.              $('.param-list .add-param').live('click', function(){
  47.                  addParam();
  48.                  return false;
  49.              });
  50.  
  51.              addParam();
  52.          })
  53.  
  54.      </script>
  55.  </body>
  56.  </html>

实例二:

  1.  <ul id="movieList"></ul>
  2.  
  3.  <script id="movieTemplate" type="text/x-jquery-tmpl">
  4.      <li><b>${Name}</b> (${ReleaseYear})</li>
  5.  </script>
  6.  
  7.  <script type="text/javascript">
  8.      var movies = [
  9.          { Name: "The Red Violin", ReleaseYear: "1998" },
  10.          { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
  11.          { Name: "The Inheritance", ReleaseYear: "1976" }
  12.      ];
  13.  
  14.      // Render the template with the movies data and insert
  15.      // the rendered HTML under the "movieList" element
  16.      $( "#movieTemplate" ).tmpl( movies )
  17.          .appendTo( "#movieList" );
  18.  </script>

原文地址:http://justcoding.iteye.com/blog/1553602/

[转载]jquery tmpl使用方法的更多相关文章

  1. Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据

    jquery.tmpl.js 是一个模板js  ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...

  2. [转载]jquery获取元素索引值index()方法：

    jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的 ...

  3. jquery tmpl 详解

    官方解释对该插件的说明:将匹配的第一个元素作为模板,render指定的数据,签名如下: .tmpl([data,][options]) 其中参数data的用途很明显:用于render的数据,可以是任意 ...

  4. jquery.tmpl.js 模板引擎用法

    1.0 引入: <script src="/js/jquery.tmpl.min.js"></script> 2.0 模板: <script type ...

  5. MVC - 11（下）jquery.tmpl.js +ajax分页

    继续 mvc-11(上).dto:http://www.cnblogs.com/tangge/p/3840060.html jquery.tmpl.js 下载:http://pan.baidu.com ...

  6. jQuery tmpl用法总结

    之前很是头疼循环数据的渲染,搞一大堆的命名,一点点的赋值,很是麻烦,今天学习了一下jQuery插件tmpl,下面抛出一些使用方法,供以后参考: 官方网址:http://web.archive.org/ ...

  7. JQuery.tmpl()的用法

    动态请求数据来更新页面是现在非常常用的方法,现在通过Ajax请求返回的数据更多的是json对象, 为了解决js动态拼接数据这方面的问题,JavaScript 也可以利用模版来解决这些问题,比如基于 j ...

  8. jQuery .tmpl() 用法

    动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在 ...

  9. 让jquery.tmpl.js支持index序号

    在写Web程序时,想简单处理会使用JS模板,常用的是Jquery的jquery.tmpl.js插件.整个插件还是比较好用的,后续有机会结合实际应用案例,分享下应用方法. 本次文章想分享的一点是其中的一 ...

随机推荐

  1. jBPM - jBPM Installer

    Prerequisites This script assumes you have Java JDK 1.6+ (set as JAVA_HOME), and Ant 1.7+ installed. ...

  2. SQL 的一个技巧

    遇到一个需求,项目是我接手二次开发的,之前的大神设计数据库,订单表中没有订单号,现在让我加上这个号,规则是订单创建日期加上自增的ID,ID需要补足5位,例:00002,00124,01245这样.这个 ...

  3. .NET中开源CMS目录

    提起开源cms,大家第一想到的是php的cms,因为php开源的最早,也最为用户和站长们认可,随着各大cms系统的功能的不断完善和各式各样的开源cms的出现,.net和java的高端的cms系统也逐渐 ...

  4. 使用Win7+IIS7发布网站或服务步骤

    1.安装IIS服务:控制面板=>程序=>打开或关闭WINDOWS 功能=>Internet 信息服务=>WEB服务管理器全选√ 和万维网服务:应用程序开发功能: 2.打开IIS ...

  5. 在WCF中使用Flag Enumerations

      请看MSDN示例: [DataContract][Flags] public enum CarFeatures {     None = 0,     [EnumMember]     AirCo ...

  6. JavaScript最佳实践：可维护性

    代码约定 一.可读性 代码缩进 包含注释 二.变量和函数命名 变量名应为名词如car或person 函数名应该以动词开始,如getName().返回布尔类型值的函数一般以is开头,如isEnable( ...

  7. extends 与 implements 的区别

    extends与implements是Java继承中使用的两个关键字,但extends与implements使用的情景不同: 1.接口继承接口,使用extends 2.类继承类时,用extends 3 ...

  8. DEDECMS中，list标签和pagelist标签

    列表数据标签:dede:list {dede:list col='' titlelen='' infolen='' imgwidth='' imgheight='' orderby='' pagesi ...

  9. sbt的安装设置

    文章转载自http://my.oschina.net/u/915967/blog/146746 本文主要是windows平台的安装,linux环境操作类似. 首先到http://www.scala-s ...

  10. 【转】winform与web 按钮button去掉边框

    ref:http://blog.csdn.net/wangzh300/article/details/5264316 WinForm的话 设置Button属性的FlatStyle为Flat,并且设置F ...