jquery.tmpl的使用
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的使用的更多相关文章
- jquery tmpl 详解
官方解释对该插件的说明:将匹配的第一个元素作为模板,render指定的数据,签名如下: .tmpl([data,][options]) 其中参数data的用途很明显:用于render的数据,可以是任意 ...
- artTemplate里一个比不上jQuery tmpl模板的地方就是放一个数组进去它不会自动循环.
artTemplate里一个比不上jQuery tmpl模板的地方就是放一个数组进去它不会自动循环.
- jquery.tmpl.js 模板引擎用法
1.0 引入: <script src="/js/jquery.tmpl.min.js"></script> 2.0 模板: <script type ...
- MVC - 11(下)jquery.tmpl.js +ajax分页
继续 mvc-11(上).dto:http://www.cnblogs.com/tangge/p/3840060.html jquery.tmpl.js 下载:http://pan.baidu.com ...
- jquery tmpl遍历
最近发现大家用模板渲染一些顺带逻辑功能代码块时,用jquery tmpl较多,遇到了一些问题,现在就个人以前研究过的一切常用功能作介绍,主要针对遍历,其它的大家可以自行浏览一起网站,如:http:// ...
- jQuery tmpl用法总结
之前很是头疼循环数据的渲染,搞一大堆的命名,一点点的赋值,很是麻烦,今天学习了一下jQuery插件tmpl,下面抛出一些使用方法,供以后参考: 官方网址:http://web.archive.org/ ...
- JQuery.tmpl()的用法
动态请求数据来更新页面是现在非常常用的方法,现在通过Ajax请求返回的数据更多的是json对象, 为了解决js动态拼接数据这方面的问题,JavaScript 也可以利用模版来解决这些问题,比如基于 j ...
- jQuery .tmpl() 用法
动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在 ...
- 让jquery.tmpl.js支持index序号
在写Web程序时,想简单处理会使用JS模板,常用的是Jquery的jquery.tmpl.js插件.整个插件还是比较好用的,后续有机会结合实际应用案例,分享下应用方法. 本次文章想分享的一点是其中的一 ...
- jquery.tmpl.min.js--前端实现模版--数据绑定--详解
动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在 ...
随机推荐
- $Android AlertDialog的各种用法总结
Refer:http://www.2cto.com/kf/201205/131876.html (一)最简单的用法(详见注释) 1 // 1.创建简单的AlertDialog // AlertDial ...
- $《第一行代码:Android》读书笔记——第3章 UI基础
(一)Android常用控件及简单用法 1.如下图: 2.补充: (1)margin:外边距:padding:内边距. (2)gravity:子元素的位置:layout_gravity:子元素在父元素 ...
- Python的operator.itemgetter函数和sorted函数
写这篇文章的目的是之前在<机器学习实战>用Python3实现KNN算法时用到的几个函数不太懂, 地址: 1- https://github.com/hitergelei/Self-Lear ...
- Kubernetes Metrics-Server
github地址:https://github.com/kubernetes-incubator/metrics-server 官网介绍:https://kubernetes.io/docs/task ...
- POJ 3159 最短路 SPFA
#include<iostream> using namespace std; const int nMax = 30005; const int mMax = 150005; const ...
- hql学习记录
` String hql = "from SysUser o join o.set where owner_id = :newName"; Query query = this.g ...
- 生产环境中,通过域名映射ip切换工具SwitchHosts
项目中,经常需要配置host.将某个域名指向某个ip.手动配置C:\Windows\System32\drivers\etc\hosts,非常不方便.这里分享一个可以高效切换host工具:Switch ...
- Qt中使用setStyleSheet对QPushButton按钮进行外观设置
Qt中使用setStyleSheet对按钮进行外观设置 字体颜色的设置一般时以下两种方案: (1)属于QWidget子类的一些控件 可以直接使用样式表,例如label->setStyleShee ...
- DB处理大量数据处理日志报错问题
因为当插入.更新或删除大批量数据的时候,有时候会出现事务日志满的问题,所以解决步骤 1.连接到当前数据库 db2 connect to uppdb 2.查看数据库配置文件 db2 get db cf ...
- review35
使用Thread创建线程通常使用的方法是:Thread(Runnable target).该构造方法中的参数是一个Runnable类型的接口,因此在创建线程对象时必须向构造方法的参数传递一个实现Run ...