jTemplate的用法

 

1.通过JS获取JSON形式的数据；

2.获取一个HTML模板，与数据相结合，生成页面HTML。

之前一直用的是自己手写的替换，麻烦死了，还要兼容不同的浏览器。终于发现原来还有jTemlpate这个好东西。上网查了下，也没有人简单地介绍下用法，在这里就写点吧。

 

• 最基础的应用：

  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:"龙猫",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">你好:龙猫,今天你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); 

var areaData ={ huabei: maincity[0][1], huadong: maincity[1][1], huanan: maincity[2][1], xibei: maincity[3][1], huaBeiAll: allprov[0][1], huadongAll: allprov[1][1], huananAll: allprov[2][1], xibeiAll: allprov[3][1], otherAll: allprov[4][1]}; $('#beforeDiv').setTemplateElement('template').processTemplate(areaData);

 

<textarea id="template" class="" style="display:none" mce_style="display:none"> <div class="danchuTop"> <span style="float:left;" mce_style="float:left;">请选择工作地点</span> <span class="close" style="float:right; width:50px; cursor:pointer;" οnclick="closeLayer()">[关闭]</span> </div> <div id="danchuContent"class="clearfix"> <div id="selectContent" class="item" style="display:none;" mce_style="display:none;"> <h4>选中城市：</h4> <div> </div> </div> <div id="contentOne"> <h3>主要城市：</h3> <div class="item"> <h4>华北-东北:</h4> <div> {#foreach $T.huabei as record} <span id="{$T.record}">{ja[$T.record]}</span> {#/for} </div> </div> <div class="item"> <h4>华东 地区:</h4> <div> {#foreach $T.huadong as record} <span id="{$T.record}">{ja[$T.record]}</span> {#/for} </div> </div> <div class="item"> <h4>华南-华中:</h4> <div> {#foreach $T.huanan as record} <span id="{$T.record}">{ja[$T.record]}</span> {#/for} </div> </div> <div class="item"> <h4>西北-西南:</h4> <div> {#foreach $T.xibei as record} <span id="{$T.record}">{ja[$T.record]}</span> {#/for} </div> </div> </div> <div id="contentTwo"> <h3>所有省份：</h3> <div class="item"> <h4>华北-东北:</h4> <div> {#foreach $T.huaBeiAll as record} <span id="{$T.record}">{ja[$T.record]}</span> {#/for} </div> </div> <div class="item"> <h4>华东 地区:</h4> <div> {#foreach $T.huadongAll as record} <span id="{$T.record}">{ja[$T.record]}</span> {#/for} </div> </div> <div class="item"> <h4>华南-华中:</h4> <div> {#foreach $T.huananAll as record} <span id="{$T.record}">{ja[$T.record]}</span> {#/for} </div> </div> <div class="item"> <h4>西北-西南:</h4> <div> {#foreach $T.xibeiAll as record} <span id="{$T.record}">{ja[$T.record]}</span> {#/for} </div> </div> </div> </div>