Jquery中设置模板绑定数据的方法

 

http://jtemplates.tpython.com/ 官方网站

jQuery的jTemplates插件实现了一种灵活的方式来控制显示，它允许我们定义好一个显示模板，jQuery在展现数据时根据选择的模板来动态生成。这就类似于ASP.NET中的ItemTemplate，也和XSLT有些类似。

jQuery官方网站给jTemplates的定义是：jTemplates is a template engine 100% in JavaScript.更多的信息可以参考http://jtemplates.tpython.com/

使用例子一如下：

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这个数据。

例子二循环输出：

1、数据：

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

2、模板

< textarea id= "template"  style= "display:none">
      {#foreach $T as record}
         你好:{$T.name},今天你{$T.record.age}岁了。< br />
     {#/for}
< /textarea>

3、调用：

 $( "#Panel").setTemplateElement( "template");
 $( "#Panel").processTemplate(data);