JTemplate学习笔记

       jquery编写的 一个开源的纯javascript的页面框架引擎，有一套自己定义的页面标签，其处理的数据需为json数据类型，使用起来简洁方便，为程序员极大的缩减了js代码量。

       jtemplate的主要用途是你可以指定一个页面区域（div）显示你定义模板里面的内容。jtemplate提供了可以在当前页面中定义模板，也可以在其他文件中定义模板。下面我会具体说明怎么创建模板。其工作流程为    js获取数据(json)------>传输数据给模板(template)--------->模板展示数据(tag)。

 

创建模板

1. 方法写入。即使用setTemplate(data)方法写入。data可以是一个存在的模板实例，也可以是模版的内容。

2. 在当前页面创建模板。如果在当前页面创建模板，必须将模板的内容放在特定的区域内，jtemplate定义为<area></area>html标签内，其有三种不同的展现方式：
（1） 直接写在<area id="template" style="display:none"></area>中
（2）写在<p style="display:none"><area id="template"><!-- ****--></area></p>，使用<!-- -->进行注释
（3）写在<p style-"diplay:none"><area id="template"><[CDATA[ *****]]></area></p>，使用<[CDATA   ]] 注释

步骤

（1）首先要知道在哪个区域展示模板，所以首先要确定<div id="area"></div>
（2）创建展示的模板
（3）将模板和区域联系起来，其中使用到上面提到的不同情况下的引入模版的方法

 

实例

1. 方法写入
区域：<div id="result"></div>
$("#result").setTemplate("this is a jtemplate test by {$T.bold()} version <em>{$Q.version}</em>");
$("#result").processTemplate("data");
.processTemplate(data)为执行模板，其中data为数据。如果模板需要读取数据，则data不能为空，也不可以不写。否则，会抛出异常。

 

2.当前页面创建模板
（1）区域：<div id="result"></div>
         模板：<textarea id="template" style="display:none"> this is a jtemplate test by {$T.bold()} version <em>{$Q.version}</em> </textarea>
$("#result").setTemplateElement("template");
$("#result").processTemplate("data");
（2）区域：<div id="result"></div>
         模板：<textarea id="template" style="display:none"> <!--this is a jtemplate test by {$T.bold()} version <em>{$Q.version}</em> --></textarea>
$("#result").setTemplateElement("template");
$("#result").processTemplate("data");
（2）区域：<div id="result"></div>
         模板：<textarea id="template" style="display:none"> <[CDATA[this is a jtemplate test by {$T.bold()} version <em>{$Q.version}</em> ]]></textarea>
$("#result").setTemplateElement("template");
$("#result").processTemplate("data");

3.在其他页面创建模板
当前区域：<div id="result"></div>
template.html <div>this is a jtemplate test by {$T.bold()} version <em>{$Q.version}</em></div>
$("#result").setTemplateURL("template.html");
$("#result").processTemplate("data");