jTemplates是一个基于JQuery的模板引擎插件,功能强大,有了他你就再不用为使用JS绑定数据集时发愁了。
首先送上jTtemplates的官网地址:http://jtemplates.tpython.com/,你可以在这里下载代码和相关参考文档
在使用jTemplates时最好先定义好模板,你可以把它放在textarea文本框里如:
<textarea id="txtTemplate" style="display:none">
<![CDATA[
hello {$T.name}.
]]>
</textarea>
这样就定了一个简单的模板,下面再进行模板数据的定义:
var mydata = { name: 'Anne', age: '20' };
定义模板显示容器:
<div id="result1"></div>
通过简单的两行代码就可以完成模板的执行工作:
$("#result1").setTemplateElement("txtTemplate");
$("#result1").processTemplate(mydata);
显示结果:
hello Anne.
如何?是不是很简单方便且实用!
别急,这只是jTemplates强大功能的冰山一角。
jTemplates包含三个预定全局变量,分别是$T、$P、$Q。$T为模板提供数据调用功能,$P为模板提供参数变量调用功能,$Q.version提供当前jTemplate的版本
下面介绍将会用到这些功能。
jTemplates还支持#if、#for、#cycle、#foreach、#include、#param标签,帮助你处理实现复杂的业务情形。
#if 语法:
{#if |COND|}..{#elseif |COND|}..{#else}..{#/if}
#if 示例:
{#if $T.hello} hello world. {#/if}
{#if 2*8==16} good {#else} fail {#/if}
{#if $T.age>=18} 成人了 {#else} 未成年 {#/if}
{#if $T.list_id == 3} System list {#elseif $T.list_id == 4} Users List {#elseif $T.list_id == 5} Errors list {#/if}
#for 语法:
{#for |VAR| = |CODE| to |CODE| [step=|CODE|]}..{#else}..{#/for}
或
{#for |variable| = |start| to |end| [step=|stepBy|]}..{#else}..{#/for}
#for 示例:
默认步长:{#for index = 1 to 10} {$T.index} {#/for}
正向步长:{#for index = 1 to 10 step=3} {$T.index} {#/for}
负向步长及空循环:{#for index = 1 to 10 step=-3} {$T.index} {#else} nothing {#/for}
也可以在循环中使用变量:{#for index = $T.start to $T.end step=$T.step} {$T.index} {#/for}
说明:{#else}是在{#for...}未能执行的时的输出内容。
#foreach 语法:
{#foreach |VAR| as |NAME| [begin=|CODE|] [count=|CODE|] [step=|CODE|]}..{#else}..{#/for}
#foreach 示例:
默认:{#foreach $T.table as record} {$T.record.name} {#/for}
指定起始位置:{#foreach $T.table as record begin=1} {$T.record.name} {#/for}
指定起始和循环次数:{#foreach $T.table as record begin=1 count=2} {$T.record.name} {#/for}
指定步长:{#foreach $T.table as record step=2} {$T.record.name} {#/for}
#foreach 内定环境变量:
$index - index of element in table
$iteration - id of iteration (next number begin from 0)
$first - is first iteration?
$last - is last iteration?
$total - total number of iterations
$key - key in object (name of element) (0.6.0+)
$typeof - type of element (0.6.0+)
#foreach 示例所需要的数据:
var data = {
name: 'User list',
list_id: 4,
table: [
{id: 1, name: 'Anne', age: 22, mail: 'anne@domain.com'},
{id: 2, name: 'Amelie', age: 24, mail: 'amelie@domain.com'},
{id: 3, name: 'Polly', age: 18, mail: 'polly@domain.com'},
{id: 4, name: 'Alice', age: 26, mail: 'alice@domain.com'},
{id: 5, name: 'Martha', age: 25, mail: 'martha@domain.com'}
]
};
(0.7.0+)版以后新增的功能,支持待循环集合用函数代替:
{#foreach |FUNC| as |NAME| [begin=|CODE|] [end=|CODE|] [count=|CODE|] [step=|CODE|]}..{#else}..{#/for}
例:
f = function(step) {
if(step > 100) return null; // stop if loop is too long
return "Step " + step;
};
$("#result").setTemplate("{#foreach f as funcValue begin=10 end=20} {$T.funcValue}<br/> {#/for}");
$("#result").processTemplate();
#foreach在每次循环时请求的就是f函数,然后传递参数给f使用,并返回结果给funcValue变量
#cycle 语法:
{#cycle values=|ARRAY|}
功能:提供周期性的调用,在循环中实现交替样式功能时可用到
示例:
{#cycle values=[1,2,3,4]}
下面模板在执行循环时,就会周期性的调用#cycle数组中的值,这样就能实现行交替的效果:
<table width=\"200\">
{#foreach $T.table as row}
<tr bgcolor=\"{#cycle values=['#AAAAAA','#CCCCCC']}\">
<td>{$T.row.name.link('mailto:'+$T.row.mail)}</td>
</tr>
{#/for}
</table>
#include 语法:
{#include |NAME| [root=|VAR|]}
功能:提供子模板调用
示例:
{#template MAIN}
{* this is comment *}
{$T} {* $T == $T.toSource() *}
<table>
{#foreach $T.table as record}
{#include ROW root=$T.record}
{#/for}
</table>
{#/template MAIN}
{#template ROW}
<tr class="{#cycle values=['bcEEC','bcCEE']}">
<td>{$T.name}</td>
<td>{$T.mail}</td>
</tr>
{#/template ROW}
说明:{#template MAIN} 是指定模板的主要部分,必不可少。
{#template ROW}是定义一个名为“ROW”的子模板。
{#include ROW root=$T.record}是主模板调用“ROW”子模板,并传递参数$T.record
#param 语法:
{#param name=|NAME| value=|CODE|}
功能:定义模板内的局部变量参数,使用$P调用。
示例:
$("#result").setTemplate("{#param name=x value=888}{$P.x}");
$("#result").processTemplate();
输出结果:888
示例:
$("#result").setTemplate("{#param name=x value=$P.x+1}{$P.x}");
$("#result").setParam('x', 777);
$("#result").processTemplate();
输出结果:778
示例:
$("#result").setTemplate("<ul>{#foreach $T.table as row}<li>{$P.x} {$T.row.name}</li>{#param name=x value=$P.x+3}{#/for}<ul>");
$("#result").setParam('x', 1);
$("#result").processTemplate(data);
需要数据:
var data = {
name: 'User list',
list_id: 4,
table: [
{id: 1, name: 'Anne', age: 22, mail: 'anne@domain.com'},
{id: 2, name: 'Amelie', age: 24, mail: 'amelie@domain.com'},
{id: 3, name: 'Polly', age: 18, mail: 'polly@domain.com'},
{id: 4, name: 'Alice', age: 26, mail: 'alice@domain.com'},
{id: 5, name: 'Martha', age: 25, mail: 'martha@domain.com'}
]
};
输出结果:
# 1 Anne
# 4 Amelia
# 7 Polly
# 10 Alice
# 13 Martha
转自 http://hi.baidu.com/dongyuejiang/item/4e4ea8c60ac4f362f7c95dab
相关推荐
**一、jTemplates简介** jTemplates是一个轻量级的JavaScript库,它的主要功能是提供一个模板语法,使得开发者能够用纯HTML格式定义动态内容的结构,然后用JSON或JavaScript对象中的数据填充这些模板。这样做的好处...
一、JTemplates 简介 JTemplates 是一个轻量级的Java库,它允许开发者将HTML模板与Java代码相结合,以生成动态网页内容。通过将业务逻辑与视图层分离,JTemplates 提供了一种灵活且易于维护的解决方案,特别适用于...
**一、jTemplates简介** jTemplates是一款轻量级的JavaScript模板引擎,它允许开发者将HTML结构与数据分离,通过模板语法来动态渲染页面内容。这款组件的出现,极大地简化了JavaScript中复杂的数据绑定和DOM操作,...
一、jQuery.jTemplates简介 jQuery.jTemplates是基于Mustache模板语言理念的一个jQuery插件,它的主要功能是将JSON数据与HTML模板结合,生成动态内容。通过预定义的模板和JavaScript对象,开发者可以轻松地创建动态...
**jTemplates 0.8.4 最新版:模板引擎与jQuery插件的高效结合** jTemplates是一款基于jQuery的模板引擎,旨在简化JavaScript中的数据绑定和动态内容渲染。它通过使用预定义的模板语法,允许开发者将HTML结构和数据...
jquery-jtemplates.js可以用,请放心下载,希望能帮到大家。
**JTemplates 模板引擎详解** JTemplates 是一个强大的JavaScript模板引擎,用于在客户端动态生成HTML内容。它允许开发者将数据和视图分离,通过简单的模板语法将数据填充到HTML结构中,从而实现高效的页面渲染。...
在本文中,我们将深入探讨jTemplates的工作原理,并通过一个具体的“demo”来展示其用法。 ### 一、jTemplates基本概念 1. **模板语法**:jTemplates的模板语法使用特殊的占位符,如`{$Template}`,`{$Data}`等,...
**jQuery jTemplates** 是一个强大的JavaScript模板引擎,它专门设计用于Web开发中的前端数据绑定。在Web应用程序中,数据和视图之间的分离是至关重要的,而jTemplates提供了一个高效的解决方案,使得开发者能够将...
jTemplates是一套用作较广的基于jQuery开发的javascript模板引擎,用它可以配合ASP/PHP/JSP/等众多语言来完成诸如通过JavaScript获取JSON数据、获取一个HTML模板、构建客户端分页表格、与数据结合生成HTML静态页面的...
**基于jQuery开发的JavaScript模板引擎 - jTemplates** jTemplates是一个基于jQuery的JavaScript模板引擎,它允许开发者使用HTML模板来动态渲染数据,极大地提高了Web应用的界面更新效率和用户体验。通过将数据与...
内容索引:脚本资源,jQuery,jTemplates jTemplates是一套用作较广的基于jQuery开发的javascript模板引擎,用它可以配合ASP/PHP/JSP/等众多语言来完成诸如通过JavaScript获取JSON数据、获取一个HTML模板、构建客户端...
在这个场景中,我们讨论的是如何在 ASP.NET MVC 中利用 jQuery 模板引擎 JTemplates 来呈现表格数据。jQuery 模板引擎如 JTemplates 提供了一种简便的方式来动态生成 HTML 内容,尤其是当需要处理复杂的数据结构时,...
`jTemplates`支持JSON数据格式,可以方便地与服务器端的数据接口进行对接。 3. **日期插件**: 在网页中显示和处理日期通常需要用到特定的插件,如`jQuery UI Datepicker`或`moment.js`。`jQuery UI Datepicker`...
最后,"jquery-jtemplates.js"是jTemplate插件的文件,这是一个基于jQuery的模板引擎。jTemplate允许开发者使用简单的HTML模板语法来动态渲染数据,将数据绑定到页面元素上,实现数据驱动的视图更新。这在处理大量或...
然而,理解如何与其他工具(如SpringBoot的`templates`和`static`目录、Angular的模板、Django的`templates`设置,以及jQuery的模板引擎JTemplates等)配合使用,也是构建高效Web应用的关键。熟悉这些相关知识,有助...