jquery.tmpl是jQuery模板插件,http://plugins.jquery.com/tmpl/ （另外还有一个插件dot.js，不依赖与jquery,性能更佳，使用方法大同小异）

在网页中大量使用异步请求数据来更新页面内容非常常见，异步请求返回的内容一般是表现为json格式的数据，因为HTML结构的复杂性，我们在没有使用任何工具下要将json表现格式的数据生成HTML是非常繁琐的，而且容易出错，不好维护。因此通过jquery.tmpl和定义HTML模板可以轻松很多，更利于维护。

Tmpl提供了几种tag：

1,   ${}：等同于{{=}}，是输出变量，通过了html编码的。

2,  {{html}}:输出变量html,但是没有html编码，适合输出html代码。

3,  {{if }} {{else}}:提供了分支逻辑。

4,  {{each}}:提供循环逻辑，$value访问迭代变量。

基本使用

1，首先我们需要引用jquery.js和jquery.tmpl.js

2，定义一个模板

3，调用tmpl()方法：$("模板ID").tmpl(data);

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title> new document </title>

 </head>

<style type="text/css">

#list li {

  padding: 8px 0;

  line-height: 1.8em;

  list-style-type: decimal;

}

</style>

 <body>

   <ul id="list"></ul>

 </body>

</html>

<script type="text/javascript" src='jquery.js'></script>

<script type="text/javascript" src='jquery.tmpl.js'></script>
<!--定义一个User模板-->

<script type="text/template" id='UserTmpl'>

    <li>

        <span>${NickName}</span>

	<span>${Age}</span>

        <span>${Gender}<span>

    </li>

</script>

<script type="text/javascript">

	var users=[{ID:"0001",NickName:"小白",Gender:false,Age:18},{ID:"0001",NickName:"小黑",Gender:true,Age:20}];

	$("#list").append($("#UserTmpl").tmpl(users));

</script>

　　

{{if }} {{else}}的使用

明显对于性别Gender属性需要使用到{{if}}和{{else}}了

修改一下模板  {{if}}后面加的就是符合if里面条件后要输出的HTML,  使用{{if}}需要有结束标记{{/if}}

 <li>

        <span>${NickName}</span>

	<span>${Age}</span>

	{{if Gender}}

	<span>男</span>

	{{else}}

	<span>女</span>

	{{/if}}

</li>

{{each}}使用

<script id="each" type="text/x-jquery-tmpl">

    <li>

	   <span>${Title}</span>

	   <span>Languages:</span>

	   <ul>

	      {{each Languages}}

		  <li>${$value.Name}</li>

		  {{/each}}

	   <ul>

	</li>

</script>

<script type="text/javascript">

　　  var movies = [{Title: "Meet Joe Black", Languages: [{ Name: "English" },{ Name: "French" }]}];

　　$("#each").tmpl(movies).appendTo('#div_each');

</script>

　　

jquery.tmpl的使用的更多相关文章

  1. jquery tmpl 详解

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

  2. artTemplate里一个比不上jQuery tmpl模板的地方就是放一个数组进去它不会自动循环.

    artTemplate里一个比不上jQuery tmpl模板的地方就是放一个数组进去它不会自动循环.

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

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

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

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

  5. jquery tmpl遍历

    最近发现大家用模板渲染一些顺带逻辑功能代码块时,用jquery tmpl较多,遇到了一些问题,现在就个人以前研究过的一切常用功能作介绍,主要针对遍历,其它的大家可以自行浏览一起网站,如:http:// ...

  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插件.整个插件还是比较好用的,后续有机会结合实际应用案例,分享下应用方法. 本次文章想分享的一点是其中的一 ...

  10. jquery.tmpl.min.js--前端实现模版--数据绑定--详解

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

随机推荐

  1. OpenGL学习进程（5）第三课：视口与裁剪区域

    本节是OpenGL学习的第三个课时,下面介绍如何运用显示窗体的视口和裁剪区域:     (1)知识点引入:     1)问题现象: 当在窗体中绘制图形后,拉伸窗体图形形状会发生变化: #include ...

  2. 每天一个Linux命令（41）iostat命令

        iostat是I/O statistics(输入/输出统计)的缩写,对系统的磁盘操作活动进行监视.它的特点是汇报磁盘活动统计情况,同时也会汇报出CPU使用情况.     (1)用法:     ...

  3. 主攻ASP.NET MVC4.0之重生:发邮箱激活验证

    导入Interop.jmail组件 using jmail;using System.Net.Mail; 点击下载源代码 Controller相关代码 public class SendEmailCo ...

  4. JVM内存的堆、栈和方法区

    JVM的内存分为堆.栈.方法区和程序计数器4个区域 存储内容:基本类型,对象引用,对象本身,class,常量,static变量 堆: 拥有者:所有线程 内容:对象本身,不存放基本类型和对象引用 垃圾回 ...

  5. Windows10在待机状态时会卡屏的解决方案

    问题:Windows10在待机时,会出现卡屏(鼠标.键盘都无法操作,只能重启电脑),区别于平时我们看得比较多的花屏.蓝屏.黑屏. 原因:经过一段时间的待机,Windows10会进入到降电节能模式,由于 ...

  6. RDLC 微软报表 自定义函数

    报表的空白处点右键,报表属性,CODE,按下面的格式输入自定义函数: Shared Function ShowDate(value as DateTime) as string if value< ...

  7. 获取浏览器的相关信息(navigator)

    * 智能机浏览器版本信息: * */ var browser = { versions: function() { var u = navigator.userAgent + navigator.ap ...

  8. VC++异常捕获？？

    1. std: #include <string> #include<iostream> // for cerr //#include <stdexcept> // ...

  9. 英语发音规则---O字母

    英语发音规则---O字母 一.总结 一句话总结:(注:本文所有//的音标为英音音标,[]的音标为美音音标) 1.O在开音节中发/əu/ [o]? no /nəʊ/ [no] adv. 不 go /gə ...

  10. 2017-03-01 Oracle10g的安装与配置使用

    今天项目中又用到了Oracle,时隔三年没有碰过Oracle,之前在做某城市公共自行车管理系统时使用的是Orace10g版本,Oracle给我最大的感觉就是安装上以后,电脑就会变得很卡,所以大家当不使 ...