jQuery模版

来源：互联网发布：宿舍椅子知乎编辑：程序博客网时间：2024/05/30 05:16

最基础的应用：
1.导入jTemplates.js：<SCRIPT type="text/javascript" src="JS/jquery-jtemplates.js"></SCRIPT>
2.html中的代码：<div id="jTemplatesTest"></div>
3.模板代码：
< textarea id="template" style="display:none">
你好:{$T.name},今天你{$T.age}岁了。
</textarea>
4.JS数据：var profile={name:"XXX",age:"24"};
5.调用方法：
$("#jTemplatesTest").setTemplateElement("template");//template指模板容器（这里是textarea）的ID；这里把template的innerHTML给了jTemplatesTest。也可以直接将innerHtml传入，譬：var abc =‘<textarea id="template" style="display:none">你好:{$T.name},今天你{$T.age}岁了。</textarea>’；
$("#jTemplatesTest").setTemplateElement(abc);
$("#jTemplatesTest").processTemplate(profile);//让jTemplatesTest读取profile这个数据。
6.最终输出：<div id="jTemplatesTest">你好:XXX,今天你24岁了。</div>
循环输出：
数据：

var data = [{age:1,name:'小A'},{age:2,name:'小B'},{age:3,name:'小C'},{age:4,name:'小D'},{age:5,name:'小E'}];

模板：

< textarea id="template" style="display:none">
      {#foreach $T as record}
     你好:{$T.name},今天你{$T.record.age}岁了。<br />
     {#/for}
</textarea>
调用：
$("#Panel").setTemplateElement("template");
$("#Panel").processTemplate(data);

0 0