jQuery.loadTemplate客户端模板
jQuery.Template虽然用起来没有Mustache简洁和方便,还是学习了解一下,做个笔记。
模板可以定义在页面script标签,如下
<script type="text/html" id="template">
<div data-content="author"></div>
<div data-content="date"></div>
<img data-src="authorPicture" data-alt="author"/>
<div data-content="post"></div>
</script>
也可以定义到独立的html文件中,好处是可以使用浏览器缓存,例如:
<div style="margin:50;border:solid 1px red"> <div data-content-text="author"></div>
<div data-content="date"></div>
<img data-src="authorPicture" data-alt="author" />
<div data-content="post"></div>
</div> <hr />
在客户端调用,如果数组数据,模板自动循环重复输出
//$("#template-container").loadTemplate($("#template"),
// {
// author: 'Joe Bloggs',
// date: '25th May 2013',
// authorPicture: 'https://www.baidu.com/img/bd_logo1.png',
// post: 'This is the contents of my post'
// }); $("#template-container").loadTemplate("Templates/template.html",
[{
author: 'Joe Bloggs',
date: '25th May 2013',
authorPicture: 'https://www.baidu.com/img/bd_logo1.png',
post: 'This is the contents of my post'
},
{
author: 'Wilson就是看到看看',
date: '25th May 2013',
authorPicture: 'https://www.baidu.com/img/bd_logo1.png',
post: 'This is the contents of my post'
}
]);
使用jquery.template 输出table
html:
<table border="1">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
template:
<tr>
<td data-content="id"></td>
<td data-content="name"></td>
</tr>
javascript:
var data = []; for (var i = 0; i < 10; i++) {
data.push({ "id": i, "name": "user_name_" + i.toString() });
}
$("#tbody").loadTemplate("Templates/tbList.html", data);
参考:https://github.com/codepb/jquery-template
数据绑定属性
There are a number of different bindings and ways to bind the data. The following attributes are available: "data-innerHTML" (>= 1.4.5) - binds the value supplied to the content (innerHTML) of the element (uses $(elem).html(value))
"data-content" - alias for the newer "data-innerHTML"
"data-content-text" - binds the value supplied to the content of the element as text (uses $(elem).text(value))
"data-content-append" - appends the value to the end of the element (uses $(elem).append(value))
"data-content-prepend" - prepends the value to the beginning of the element (uses $(elem).prepend(value))
"data-id" - sets the id of the element to the value provided (uses $(elem).attr("id", value));
"data-href" - sets the href value of the element to the value provided (uses $(elem).attr("href", value));
"data-alt" - sets the alt value of the element to the value provided (uses $(elem).attr("alt", value));
"data-value" - sets the value attribute of the element to the value provided (uses $(elem).val(value))
"data-class" - sets the class attribute of the element to the value provided (uses $(elem).class(value))
"data-link" - sets the innerHtml of the element to be a link to the value provided (wraps the content in an <a> tag).
"data-link-wrap" - wraps the element in a link to the value provided. Same as "data-link", but the <a> tag wraps the element as well as the content.
"data-options" - adds options to a select box. The value for this should reference an array of strings, each option will be output as a separate option. The value will be the same as the displayed text for each option. For a more powerful version of this look at the data-template-bind option.
自定义格式化方法
$.addTemplateFormatter({
UpperCaseFormatter : function(value, template) {
return value.toUpperCase();
},
LowerCaseFormatter : function(value, template) {
return value.toLowerCase();
},
SameCaseFormatter : function(value, template) {
if(template == "upper") {
return value.toUpperCase();
} else {
return value.toLowerCase();
}
}
});
模板
<tr>
<td data-content="id"></td>
<td data-content="name" data-format="LowerCaseFormatter"></td>
</tr>
jQuery.loadTemplate客户端模板的更多相关文章
- MVC下的客户端模板技术
1.引言 在Web编程中,我们有时经常需要使用Ajax来访问服务端的接口,然后使用这些返回的数据(一般格式都是JSON)来展示客户端的相关信息.例如:在一个商品列表,我们点击某一样的商品,查看该商品的 ...
- javascript&&jquery编写插件模板
javascrpt插件编写模板 这里不分享如何编写插件,只留一个框架模板,使用面向对象的形式进行编写,方便管理 ;(function(window,document){ function FnName ...
- jquery jtemplates.js模板渲染引擎的详细用法第三篇
jquery jtemplates.js模板渲染引擎的详细用法第三篇 <span style="font-family:Microsoft YaHei;font-size:14px;& ...
- jquery jtemplates.js模板渲染引擎的详细用法第二篇
jquery jtemplates.js模板渲染引擎的详细用法第二篇 关于jtemplates.js的用法在第一篇中已经讲过了,这里就直接上代码,不同之处是绑定模板的方式,这里讲模板的数据专门写一个t ...
- jquery jtemplates.js模板渲染引擎的详细用法第一篇
jquery jtemplates.js模板渲染引擎的详细用法第一篇 Author:ching Date:2016-06-29 jTemplates是一个基于JQuery的模板引擎插件,功能强大,有了 ...
- jquery.tmpl.js 模板引擎用法
1.0 引入: <script src="/js/jquery.tmpl.min.js"></script> 2.0 模板: <script type ...
- AMQ学习笔记 - 05. 客户端模板化
概述 客户端编程模型中,大部分的步骤都是相同的.将相同的部分做成模板,将不同的部分预留接口,实现者就只需要针对不同的部分提供实现. 设计 类图 发送方客户端 说明: 基于模板的思想,SendTempl ...
- jquery判断客户端的类型
针对不同客户端下载链接的页面响应样式不一样,更人性点而已 //匹配客户端类型 var isAndroid = navigator.userAgent.toLowerCase().match(/andr ...
- jquery的一个模板引擎-zt
jQuery-jTemplate.js下载:http://jtemplates.tpython.com/ 一 , 简单介绍 它是一个基于jQuery开发的javascript模板引擎.它主要的作用如下 ...
随机推荐
- C++ string::size_type 类型【转】
int main() { string str("Hello World!\n"); cout << "The size of " << ...
- MySQL 利用SQL线程对Binlog操作(转)
背景: 对于MySQL的binlog的查看都是用其自带的工具mysqlbinlog进行操作的,其实还有另一个方法来操作binlog,就是Replication中的SQL线程去操作binlog,其实bi ...
- [java] 40个Java多线程问题总结
40个问题汇总 1.多线程有什么用? 一个可能在很多人看来很扯淡的一个问题:我会用多线程就好了,还管它有什么用?在我看来,这个回答更扯淡.所谓"知其然知其所以然","会用 ...
- 【linux】yum本地源制作
在/etc/yum.repos.d/ 目录下,有两个文件 CentOS-Base.repo和 CentOS-Media.repo 其中CentOS-Base.repo 记录着网络上的 yum 源的地 ...
- Python 通过pickle标准库加载和保存数据对象
import pickle with open('mydata.pickle','wb') as mysavedata: pickle.dump([1,2,'three'], mysavedata) ...
- Linux下SSH的Log文件路径
Redhat or Fedora Core: /var/log/secure # Mandrake, FreeBSD or OpenBSD: /var/log/auth.log # SuSE: /va ...
- SQL server 学习笔记1
1.查询安装的排序规则选项喝当前的排序规则服务器属性 select * from fn_helpcollations(); 2.查看当前服务器的排序规则 select serverproperty(' ...
- Html4与Html5的关键区别
HTML5是下一代HTML标准版本,4与5有很多相同之处,有HTML从头构建,比4升级到5要方便. 以下是10个关键区别: 1.HTML5最近很火,但是标准还在制定,4则十年之多了,不会6变: 2.简 ...
- 黄聪:利用OpenXml生成Word2007文档(转)
原文:http://blog.csdn.net/francislaw/article/details/7568317 版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[-] 一Op ...
- DEBUG模式下屏蔽某些烦人的动态日志信息
以上就是控制台循环打印的日志信息,总是会刷屏干扰到那些有用的日志信息,所以要把它们屏蔽掉,虽然如果将log级别调成info级别可以不显示了,但是那样的话,别的有用的日志信息就无法显示了. 要有针对性的 ...