10
7
2011
0

jquery插件jTemplates 1

摘自:

http://www.sosuo8.com/article-2010/use-jquery-plug-jtemplates.htm

 

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); 
 
 
附上我的测试代码(当然是照上面的来写的,呵呵!):
<html>
 <script src="jquery-1.6.1.min.js"></script>
 <script src="jquery-jtemplates_uncompressed.js"></script>
 <script>
 var data = [{age:1,name:'小A'},{age:2,name:'小B'},{age:3,name:'小C'},
             {age:4,name:'小D'},{age:5,name:'小E'}];
 </script>
 <body>
  <textarea id="template" style="display:none">
      {#foreach $T as record}
         你好:{$T.name},今天你{$T.record.age}岁了。<br />
     {#/for}
  </textarea>
 <div id="Panel">test</div>
 </body>

 <script>
  $("#Panel").setTemplateElement("template");
  $("#Panel").processTemplate(data); 
 </script>
</html>
 
结果显示:

你好:,今天你1岁了。
你好:,今天你2岁了。
你好:,今天你3岁了。
你好:,今天你4岁了。
你好:,今天你5岁了。

 

Category: Web摘记 | Tags: jquery javascript jTemplates | Read Count: 1631

登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter

Host by is-Programmer.com | Power by Chito 1.3.3 beta | Theme: Aeros 2.0 by TheBuckmaker.com