jtemplates

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/