jQuery .tmpl() 用法示例介绍

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

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

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

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

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

Tmpl提供了几种tag：

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

jquery tmpl的使用方法：

模板定义：

方法一：

<script id="movieTemplate" type="text/x-jquery-tmpl">
<li>
<b>${Name}</b> (${ReleaseYear})
</li>
</script>

方法二：

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

DATA:

var movies = [
{ Name: "The Red Violin", ReleaseYear: "1998" },
{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },
{ Name: "The Inheritance", ReleaseYear: "1976" }
];

Script:

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

实例1：

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
</head>
<body> 

<ul class="param-list"></ul> 

<script type="text/x-jquery-tmpl" id="new-param-tmpl">
<li rel="${num}">
<input type="text" name="key[${num}]" value="${key}" placeholder="key" /> =
<input type="text" name="value[${num}]" value="${value}" placeholder="value" />
<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>
<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>
</li>
</script> 

<script>
$(function(){
function addParam(key, value) {
var param_list = $('.param-list');
var num = param_list.find('li').length; 

// build a template to clone the current row
var built = $('#new-param-tmpl').tmpl({
num: num,
key: key || '',
value: value || '',
});
if (key) param_list.prepend(built);
else param_list.append(built); 

param_list.find('li:not(:last) .add-param').hide();
param_list.find('li:last .add-param').show();
param_list.find('li:not(:last) .remove-param').show();
param_list.find('li:last .remove-param').hide();
} 

// bind events
$('.param-list .remove-param').live('click', function(){
$(this).parent().remove();
return false;
});
$('.param-list .add-param').live('click', function(){
addParam();
return false;
}); 

addParam();
})
</script>
</body>
</html>

实例2

<ul id="movieList"></ul> 

<script id="movieTemplate" type="text/x-jquery-tmpl">
<li><b>${Name}</b> (${ReleaseYear})</li>
</script> 

<script type="text/javascript">
var movies = [
{ Name: "The Red Violin", ReleaseYear: "1998" },
{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },
{ Name: "The Inheritance", ReleaseYear: "1976" }
]; 

// Render the template with the movies data and insert
// the rendered HTML under the "movieList" element
$( "#movieTemplate" ).tmpl( movies )
.appendTo( "#movieList" );
</script>
赞 (0)

相关推荐

  • jQuery .tmpl(), .template()学习资料小结

    jQuery .tmpl(), .template()学习资料小结

    昨晚无意中发现一个有趣的jQuery插件.tmpl(),其文档在这里.官方解释对该插件的说明:将匹配的第一个元素作为模板,render指定的数据,签名如下: .tmpl([data,][options]) 其中参数data的用途很明显:用于render的数据,可以是任意js类型,包括数组和对象.options一般情况下都是选项了,官方指出,此处的options是一个用户自定义的键值对的map,继承自tmplItem数据结构,适用于模板render动作期间. 在这里可以下载到最新的tmpl插件,值

  • 用模版生成HTML的的框架jquery.tmpl使用详解

    动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在浏览器端拼数据就在服务器端拼数据.不过,从传输量方面来看,返回 HTML 不划算,而在 web 传输方面,现在更多的是使用 JSON 而不是 XML. 浏览器端根据 JSON 生成 HTML 有个很苦恼的地方就是,结构不复杂的时候还好,结构一复杂,就想死了,需要很小心很小心地写出几乎无法维护的 Ja

  • jQuery获取json后使用zy_tmpl生成下拉菜单

    第一次写关于AppCan开发的文章,有人写了关于jQuery或者原生Ajax与json的交互,那我就稍微写写我开发过程中使用jQuery获取json后使用zy_tmpl生成下拉菜单的实例吧. PHP服务端生成json的那部分就不写那么多了,就是输入一个数组$res,然后 复制代码 代码如下: echo $_GET['jsoncallback'] . "(" . json_encode($res) . ")"; 在AppCan的模版中,先加入一个下拉菜单,我的菜单是:

  • jquery.tmpl JQuery模板插件

    jquery.tmpl JQuery模板插件

    网址:http://api.jquery.com/jquery.tmpl/. Tmpl提供了几种tag: ${}:等同于{{=}},是输出变量,通过了html编码的. {{html}}:输出变量html,但是没有html编码,适合输出html代码. {{if }} {{else}}:提供了分支逻辑. {{each}}:提供循环逻辑,$value访问迭代变量. 下面一个简单的模板tmpl实例:(代码最能说明一切) 效果: demo下载

  • jQuery插件Tmpl的简单使用方法

    jQuery插件Tmpl的简单使用方法

    1.引入脚本 2.编写模板 2.1假设此时有一个,从后台一json格式发送来的数据 复制代码 代码如下: [{"tId":1,"tName":"张三","tAge":14,"tClass":1,"TeachClass":{"cId":1,"cName":"1班"}}, 复制代码 代码如下: {"tId":2,

  • JQuery模板插件 jquery.tmpl 动态ajax扩展

    JQuery模板插件 jquery.tmpl 动态ajax扩展

    在上一篇JQuery模板插件-jquery.tmpl中介绍了这款插件.有时我们需要去动态的ajax去加载模板,或者数据,根据url参数或者其他信息加载不同的模板,数据.在我的某个项目中有这个需求,所以特地写成jquery工具函数,加入了本地数据和ajax数据加载模板,数据的方式. 参数说明: Tmpl: function(template, data, fun) 1:template: 1): url: 为ajax的加载url,ajax当且仅当remote= true时候加载. 2):data:

  • 放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解

    放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解

    在Ajax横道的今天,我们在页面交互上有了更高的要求,动态生成HTML毫无疑问是其中的一种.动态生成HTML的方式多种多样,其核心不外乎在前段(JS)或者后端(C#/PHP-)将数据组装成我们想要的模版,最终通过一定的方法输出给用户(innerHTML.documentWrite等方式). 缺点 1)拼接字符串的过程容易出错,常常忘了'/">等匹配的符号. 2)修改前台模版的同时容易遗忘同步更改动态生成的模版. 3)拼接字符串不直观和美观,不利于查找错误,例如:数据中如果存在HTML内容,

  • jQuery .tmpl() 用法示例介绍

    动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在浏览器端拼数据就在服务器端拼数据.不过,从传输量方面来看,返回 HTML 不划算,而在 web 传输方面,现在更多的是使用 JSON 而不是 XML. 浏览器端根据 JSON 生成 HTML 有个很苦恼的地方就是,结构不复杂的时候还好,结构一复杂,就想死了,需要很小心很小心地写出几乎无法维护的 Ja

  • jQuery复合事件用法示例

    jQuery复合事件用法示例

    本文实例讲述了jQuery复合事件用法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>复合事件</title> <style type="text/css" > a{ color:#000; text-decoration:none; }

  • jQuery中事件对象e的事件冒泡用法示例介绍

    之前查手册的时候没有看到有事件对象这一概念,当时我想实现的是点击一个文本框出现一个下拉多选框,在文本框失去焦点是触发blur事件,从而使下拉框隐藏起来.但是当我要选择多选框是也会使它隐藏,就不能进行选择了,这让我很郁闷.查了一天的资料,终于在脱离了焦点这一块.在网上发现有一个事件冒泡的东西,发现通过点击可以实现我的这一功能. e.stopPropagation()阻止事件冒泡 复制代码 代码如下: <head> <title></title> <script sr

  • jQuery中$.fn的用法示例介绍

    $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了. 那么你可以这样子:$("#div").abc(); jQuery为开发插件提拱了两个方法,分别是: jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQue

  • AspNetPager控件的最基本用法示例介绍

    AspNetPager控件的最基本用法示例介绍

    AspNetPager控件是一个基于.net的第三方免费开源控件,具有开发高效.使用方便.功能完整等优点.它弥补了GridView内置分页以及PageDatasource类辅助分页的不足,将分页数据逻辑和页面UI分离开来,非常有利于SQL分页的实现.下面仅举一个最基本的用法,帮助初学者入门. 到AspNetPage官方网站相应页面下载控件:点击打开链接 下载后解压缩,里面有一个AspNetPager.dll文件,它就是我们要使用的控件.另外还有一个AspNetPager.xml文件,它是对应的文

  • Spring Boot @Conditional注解用法示例介绍

    引用Spring官方文档的说法介绍一下@Conditional注解:Spring5.0.15版本@Conditional注解官方文档 @Conditional表示仅当所有指定条件都匹配时,组件才有资格注册 . 该@Conditional注释可以在以下任一方式使用: 作为任何@Bean方法的方法级注释 作为任何类的直接或间接注释的类型级别注释 @Component,包括@Configuration类 作为元注释,目的是组成自定义构造型注释 改注解主要源码之一,通过match匹配,符合条件才装载到S

  • Oracle MERGE INTO的用法示例介绍

    Oracle MERGE INTO的用法示例介绍

    很多时候我们会出现如下情境,如果一条数据在表中已经存在,对其做update,如果不存在,将新的数据插入.如果不使用Oracle提供的merge语法的话,可能先要上数据库select查询一下看是否存在,然后决定怎么操作,这样的话需要写更多的代码,同时性能也不好,要来回数据库两次.使用merge的话则可以一条SQL语句完成. 1)主要功能 提供有条件地更新和插入数据到数据库表中 如果该行存在,执行一个UPDATE操作,如果是一个新行,执行INSERT操作 - 避免了分开更新 - 提高性能并易于使用

  • jquery.post用法示例代码

    使用ajax在前端验证是否执行某个操作 jquery.post参数为 url,[data],[callback],[type] url:发送请求地址. data:待发送 Key/value 参数. callback:发送成功时回调函数. type:返回内容格式,xml, html, script, json, text, _default. 复制代码 代码如下: $.post('admin/HhCheckVote.do?ids=' + '${ids}', {}, function(flag) {

  • addEventListener 的用法示例介绍

    (要注意的是div必须放到js前面才行) 一般情况下,如果给一个dom对象绑定同一个事件,只有最后一个会生效,比如: 复制代码 代码如下: document.getElementById("btn").onclick = method1; document.getElementById("btn").onclick = method2; document.getElementById("btn").onclick = method3; 那么将只有

  • ASP.NET Dictionary 的基本用法示例介绍

    复制代码 代码如下: Dictionary<string, string> o_Dic = new Dictionary<string, string>(); //添加元素 o_Dic.Add("01", "aaa"); o_Dic.Add("02","bbb"); //判断某个key是否存在 if (!o_Dic.ContainsKey("03")) { o_Dic.Add(&qu

随机推荐