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/