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>
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/