jquery tmpl 详解「建议收藏」

jquery tmpl 详解「建议收藏」转自:http://www.cnblogs.com/zhuzhiyuan/p/3510175.html动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等。 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在浏览器端拼数据就在服务器端拼数据。不过,从传输量方面来看,返回 HTML

大家好,又见面了,我是你们的朋友全栈君。

转自:http://www.cnblogs.com/zhuzhiyuan/p/3510175.html
动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等。

 
这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在浏览器端拼数据就在服务器端拼数据。不过,从传输量方面来看,返回 HTML 不划算,而在 web 传输方面,现在更多的是使用 JSON 而不是 XML。
浏览器端根据 JSON 生成 HTML 有个很苦恼的地方就是,结构不复杂的时候还好,结构一复杂,就想死了,需要很小心很小心地写出几乎无法维护的 JavaScript 代码。
因此一些用模版生成HTML的的框架相继出现jquery.tmpl 就是其中的一种,下面我们来详细介绍下jquery.tmpl的用法
jquery.tmpl的几种常用标签分别有:
${}{
{each}}
{
{if}}
{
{else}}
{
{html}}
不常用标签
 {

{=}},{
{tmpl}}
 and {
{wrap}}
.
${}等同与{
{=}}
是输出变量 ${}里面还可以放表达式 (=和变量之间一定要有空格,否则无效
示例:

复制代码
<div id="div_demo">
</div>
<script id="demo" type="text/x-jquery-tmpl">
<div style="margin-bottom:10px;">
  <span>${ID}</span>
  <span style="margin-left:10px;">{
{
= Name}}</span>
  <span style="margin-left:10px;">${Number(Num)+1}</span>
  <span style="margin-left:10px;">${Status}</span>
</div>
</script>
<script type="text/javascript">
  var users = [{ ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 }, { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'}];
  $("#demo").tmpl(users).appendTo('#div_demo');
</script>
复制代码

 

 

{
{each}}
 
提供循环逻辑,$value访问迭代变量 也可以自定义迭代变量(i,value)

示例:

复制代码
<div id="div_each">
</div>
<script id="each" type="text/x-jquery-tmpl"> 
<h3>users</h3>
    {
{each(i,user) users}}
<div>${i+1}:{
{
= user.name}}</div>
        {
{
if i==0}}
<h4>group</h4>
            {
{each(j,group) groups}}
<div>${group.name}</div>
            {
{
/each}}
        {
{
/if}}
    {
{
/each}}
<h3>depart</h3>
    {
{each departs}}
<div>{
{
= $value.name}}</div>
    {
{
/each}}
</script> 
<script type="text/javascript">
  var eachData = { users: [{ name: 'jerry' }, { name: 'john'}], groups: [{ name: 'mingdao' }, { name: 'meihua' }, { name: 'test'}], departs: [{ name: 'IT'}] };
  $("#each").tmpl(eachData).appendTo('#div_each');
</script>
复制代码

 

{
{if }} {
{else}}
提供了分支逻辑 {
{else}} 相当于else if

示例:

 

复制代码
<div id="div_ifelse"></div>
<script id="ifelse" type="text/x-jquery-tmpl"> 
<div style="margin-bottom:10px;"><span>${ID}</span><span style="margin-left:10px;">{
{= Name}}</span>
{
{
if Status}}
<span>Status${Status}</span>
        {
{
else App}}
<span>App${App}</span>
        {
{
else}}
<span>None</span>
        {
{
/if}}
</div>
</script> 
<script type="text/javascript">
  var users = [{ ID: 'think8848', Name: 'Joseph Chan', Status: 1, App: 0 }, { ID: 'aCloud', Name: 'Mary Cheung', App: 1 }, { ID: 'bMingdao', Name: 'Jerry Jin'}];
$("#ifelse").tmpl(users).appendTo('#div_ifelse');
</script>
复制代码

 

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

 实例

复制代码
<div id="div_html"></div>
<script id="html" type="text/x-jquery-tmpl"> 
<div style="margin-bottom:10px;">
    <span>${ID}</span>
    <span style="margin-left:10px;">{
{= Name}}</span>
  ${html}
  {
{html html}}
</div>
</script> 
<script type="text/javascript">
  var user = { ID: 'think8848', Name: 'Joseph Chan', html: '<button>html</button>' };
 $("#html").tmpl(user).appendTo('#div_html');
</script>
复制代码

 

{
{tmpl}}
 嵌套模版

实例

复制代码
<div id="tmpl"></div>
<script id="tmpl1" type="text/x-jquery-tmpl">
<div style="margin-bottom:10px;">
  <span>${ID}</span>
  <span style="margin-left:10px;">{
{tmpl($data) '#tmpl2'}}</span>
</div>     
</script>
<script id="tmpl2" type="type/x-jquery-tmpl">
{
{each Name}}${$value}  {
{
/each}}   
</script>
<script type="text/javascript">
  var users = [{ ID: 'think8848', Name: ['Joseph', 'Chan'] }, { ID: 'aCloud', Name: ['Mary', 'Cheung']}];
$("#tmpl1").tmpl(users).appendTo('#tmpl');
</script>
复制代码

 

{
{wrap}}
,包装器

实例

 

复制代码
<div id="wrapDemo">
</div>
<script id="myTmpl" type="text/x-jquery-tmpl">
The following wraps and reorders some HTML content:
{
{wrap "#tableWrapper"}}
<h3>One</h3>
<div>
First <b>content</b>
</div>
<h3>Two</h3>
<div>
And <em>more</em> <b>content</b>...
</div>
    {
{
/wrap}}
</script>
<script id="tableWrapper" type="text/x-jquery-tmpl">
<table cellspacing="0" cellpadding="3" border="1"><tbody>
<tr>
{
{each $item.html("h3", true)}}
<td>
${$value}
</td>
            {
{
/each}}
</tr>
<tr>
{
{each $item.html("div")}}
<td>
{
{html $value}}
</td>
            {
{
/each}}
</tr>
</tbody></table>
</script>
<script type="text/javascript">
$(function () {
$('#myTmpl').tmpl().appendTo('#wrapDemo');
});
</script>
复制代码

 

 

 

$data $item $item代表当前的模板;$data代表当前的数据。

 

 实例:

复制代码
<div id="div_item_data"></div>
<script id="item_data" type="text/x-jquery-tmpl"> 
<div style="margin-bottom:10px;">
    <span>${$data.ID}</span>
    <span style="margin-left:10px;">${$item.getName(" ")}</span>
   </div>
</script> 
<script type="text/javascript">
  var users = [{ ID: 'think8848', Name: ['Joseph', 'Chan'] }, { ID: 'aCloud', Name: ['Mary', 'Cheung']}];
$("#item_data").tmpl(users,
{
getName: function (spr) {
return this.data.Name.join(spr);
}
}).appendTo('#div_item_data');
</script>
复制代码

 

 $.tmplItem()方法,使用这个方法,可以获取从render出来的元素上重新获取$item

实例

<script type="text/javascript">   $('#demo').delegate('div', 'click', function () { var item = $.tmplItem(this); alert(item.data.Name); }); </script>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/148005.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 解析P12证书

    解析P12证书1.从磁盘上的证书文件中读取证书数据unsignedchar*pbP12Data;//证书数据unsignedlongulP12DataLen;//证书数据长度2.让用户输入证书密码char*szPwd;//证书密码3.将证书密码转换成UNICODE格式(最好采用二次调用方式)LPWSTRpWideChar=NULL;int

  • 无刷电机的驱动

    无刷电机的驱动原文地址:http://www.dzkf.cn/html/zonghejishu/2009/0319/3706.html前言:   有关本文所谈论的无刷电机内容,只涉及低速飞行类航模电调的小功率无传感器应用,讲解的理论比较浅显易懂,旨在让初学者(象笔者本人)能够对无刷电机有一个比较快的认识,掌握基本原理和控制方法,可以在短时间内达到应用目的。理论性的内容涉及模拟电路知识、基础电子线路

  • uniapp 真机调试_app调试

    uniapp 真机调试_app调试一:华为手机实时调试APP代码基座流程1.打开手机的开发者模式,允许USB调试,手机操作流程,进入设置-关于手机,长按版本号(开启开发模式),然后按图操作,下拉屏幕发行已连接USB调试,手机端就暂时不用再操作了2.电脑安装360手机助手,这个软件打开浏览器或者用360软件助手下载就好了,它是HBuildX和手机连接的桥梁3.HBuildX操作运行之后就可以在控制台查看进展,会自动在手机安装APK调试基座(用于调试的APK,APK就是安卓APP的安装包).

  • js 字串转换HTML,js转化html字符

    js 字串转换HTML,js转化html字符/*1.用浏览器内部转换器实现html转码*/htmlEncode:function(html){//1.首先动态创建一个容器标签元素,如DIVvartemp=document.createElement(“div”);//2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐,google支持)(temp.textContent!=u…

  • Python中优先级_低优先级队列不止5把

    Python中优先级_低优先级队列不止5把优先级队列是一种容器型数据结构,它能管理一队记录,并按照排序字段(例如一个数字类型的权重值)为其排序。由于是排序的,所以在优先级队列中你可以快速获取到最大的和最小的值。你可以认为优先级队列是一种修改过的普通队列:普通队列依据记录插入的时间来获取下一个记录,优先级队列依据优先级来获取下一个记录,而优先级取决于排序字段的值。优先级队列经常用来解决调度问题,比如给更紧急的任务更高的优先级。我们以操作系统…

  • 什么是国际顶级域名?

    什么是国际顶级域名?

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号