1.简介
通过jQuery插件实现的模板引擎。
2.使用
1)导入JS
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery-jtemplates.js"></script>
2)第一个简单demo
--JS部分
$("#easy").setTemplateElement("easyTemplate"); $("#easy").processTemplate();
--HTML部分
easy use... <div id="easy"> </div> <textarea id="easyTemplate" style="display:none;"> HELLO, <b>jtemplate</b>! </textarea> <hr>
注:默认会将HTML中的特殊字符<,>等进行转义,可以通过设置settings中的filter_data: true取消转义。
jQuery.fn.setTemplateElement(String elementName, [Array includes], [Object settings]);
3)三种全局变量
--$T:数据
--$P:参数
--$Q:XHTML element's attributes
--JS部分
$("#withData").setTemplateElement("withDataTemplate"); $("#withData").setParam("country", "U.S.A"); $("#withData").processTemplate({"name": "Bill"});
--HTML部分
access data <div id="withData"> </div> <textarea id="withDataTemplate" style="display:none;"> HELLO, is <b>{$T.name}</b> from <i> {$P.country} </i>! </textarea> <hr>
4)支持JS方法
--JS部分
function bold(content) { return "<b>" + content + "</b>"; } $("#jsFun").setTemplateElement("jsFunTemplate"); $("#jsFun").processTemplate({"name": "Bill"});
--HTML部分
invoke js function <div id="jsFun"> </div> <textarea id="jsFunTemplate" style="display:none;"> HELLO, {bold($T.name)}! </textarea> <hr>
5)IF语句
{#if |COND|}..{#elseif |COND|}..{#else}..{#/if}
--JS部分
$("#ifClause").setTemplateElement("ifClauseTemplate"); $("#ifClause").processTemplate({"mark": 90});
--HTML部分
if clause <div id="ifClause"> </div> <textarea id="ifClauseTemplate" style="display:none;"> <b>mark</b>: {$T.mark} <b>level</b>: {#if $T.mark >= 80} good {#elseif $T.mark >= 60} pass {#else} fail {#/if} </textarea> <hr>
6)foreach
{#foreach |VAR| as |NAME| [begin=|CODE|] [count=|CODE|] [step=|CODE|]}..{#else}..{#/for}
--JS部分
$("#forEach").setTemplateElement("forEachTemplate"); var students = [{"name": "A", "age": 8}, {"name": "B", "age": 9}]; $("#forEach").processTemplate({"students": students});
--HTML部分
for each <div id="forEach"> </div> <textarea id="forEachTemplate" style="display:none;"> <table> <tr> <td><b>INDEX</b></td><td><b>NAME</b></td><td><b>AGE</b></td> </tr> {#foreach $T.students as student} <tr><td>{$T.student$index}</td><td>{$T.student.name}</td><td>{$T.student.age}</td></tr> {#/for} </table> </textarea> <hr>
7)for语句
{#for |VAR| = |CODE| to |CODE| [step=|CODE|]}..{#else}..{#/for}
--JS部分
$("#forClause").setTemplateElement("forClauseTemplate"); $("#forClause").processTemplate();
--HTML部分
for clause <div id="forClause"> </div> <textarea id="forClauseTemplate" style="display:none;"> {#for index = 1 to 10} {$T.index} {#/for} </textarea> <hr>
8)include语句
{#include |NAME| [root=|VAR|]}
--JS部分
$("#includeClause").setTemplateElement("includeClauseTemplate"); var students = [{"name": "A", "age": 8}, {"name": "B", "age": 9}]; $("#includeClause").processTemplate({"students": students});
--HTML部分
include clause <div id="includeClause"> </div> <textarea id="includeClauseTemplate" style="display:none;"> {#template MAIN} <table> <tr> <td><b>NAME</b></td><td><b>AGE</b></td> </tr> {#foreach $T.students as student} {#include ROW root=$T.student} {#/for} </table> {#/template MAIN} {#template ROW} <tr> <td>{$T.name}</td><td>{$T.age}</td> </tr> {#/template ROW} </textarea> <hr>
9)cycle语句
{#cycle values=|ARRAY|}
--JS语句
$("#cycleClause").setTemplateElement("cycleClauseTemplate"); var students = [{"name": "A", "age": 8}, {"name": "B", "age": 9}]; $("#cycleClause").processTemplate({"students": students});
--HTML语句
cycle clause <div id="cycleClause"> </div> <textarea id="cycleClauseTemplate" style="display:none;"> <table> <tr> <td><b>INDEX</b></td><td><b>NAME</b></td><td><b>AGE</b></td> </tr> {#foreach $T.students as student} <tr bgcolor="{#cycle values=['#AAAAAA','#CCCCCC']}"><td>{$T.student$index}</td><td>{$T.student.name}</td><td>{$T.student.age}</td></tr> {#/for} </table> </textarea> <hr>
3.参考资料
http://jtemplates.tpython.com/
相关推荐
jTemplates是一套用作较广的基于jQuery开发的javascript模板引擎,用它可以配合ASP/PHP/JSP/等众多语言来完成诸如通过JavaScript获取JSON数据、获取一个HTML模板、构建客户端分页表格、与数据结合生成HTML静态页面的...
jquery-jtemplates.js可以用,请放心下载,希望能帮到大家。
JTemplates JTemplates
jTemplates解析Html模版的一个demo,直接导入myeclipse即可使用
jTamplates 模板引擎,基于jQuery插件,本来资源有限,找到一个0.7.4的,但是发现没有源码,想扩展下不方便,于是回来找了找新的,完整版的
JTemplates 的一个 例子
jTemplates组件源码,好东西,多分享...
jquery,jtemplates 实例,有3个DEMO
用于web开发中前端数据绑定。jtemplate是在jquery的基础上实现的,所以脚本的引入顺序不能颠倒,否则会报错。
内容索引:脚本资源,jQuery,jTemplates jTemplates是一套用作较广的基于jQuery开发的javascript模板引擎,用它可以配合ASP/PHP/JSP/等众多语言来完成诸如通过JavaScript获取JSON数据、获取一个HTML模板、构建客户端...
NULL 博文链接:https://karlhell.iteye.com/blog/463833
下面要介绍就是JTemplates,它也是基于Jquery的。 代码如下:<%@ Page Language=”C#” Inherits=”System.Web.Mvc.ViewPage” %><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
Jquery 视图插件,模板插件和日期插件的案例