jQuery特效与应用 jquery template

转载

archangle 2024-03-13 19:22:37

文章标签 jQuery特效与应用 #if json javascript 文章分类 jQuery 前端开发

jtemplate, 它是客户端基于javascript的模板引擎，绑定的数据为json对象。服务端只需要把对象集合序列化成json格式并传入客户端，客户端再把json对象填充模版生成列表，一、服务端传输的只是json格式的字符串，传输的数据量可是大大减少了，二、遍历绑定的工作转移到了客户端，大大减轻了服务端的压力。

为什么要用 js template 为什么要模版呢，

以下应用场景可以使用模板引擎：
1、如果你有动态ajax请求数据并需要封装成视图展现给用户，想要提高自己的工作效率。
2、如果你是拼串族或者数组push族，迫切的希望改变现有的书写方式。一直拼JS代码多不易维护可读性差
3、如果你在页面布局中，存在共性模块和布局，你可以提取出公共模板，减少维护的数量。

4：还可以使用循环\判断等语句, 减少工作量

1. 要使用jtemplate首先要引入两个js脚本文件：

<script type="text/javascript" src="Scripts/jquery-jtemplates.js"></script>

需要注意的是，jtemplate是在jquery的基础上实现的，所以脚本的引入顺序不能颠倒，否则会报错。

这些脚本可到http://jtemplates.tpython.com/去下载。

var data ={ 
 TotalCount:64, 
 Lists:[ 
 {Id:'2001' ,Title:'新闻11',CreateDate:'2011-08-08'}, 
 {Id:'2002' ,Title:'新闻22',CreateDate:'2011-08-08'}, 
 {Id:'2003' ,Title:'新闻33',CreateDate:'2011-08-08'}, 
 {Id:'2004' ,Title:'新闻44',CreateDate:'2011-08-08'}, 
 {Id:'2005' ,Title:'新闻55',CreateDate:'2011-08-08'}, 
 ] 
 }

1、引入库文件

<script type="text/javascript" src="jquery.js"></script> 
 <script type="text/javascript" src="jquery-jtemplates.js"></script>

2、编写模板

<p id="<span style="color:#FF0000;">result</span>"></p> 
 <p id="templateContainer" style="display:none;"> 
 <table> 
 <tr><td>Id</td><td>标题</td><td>发布时间</td></tr> 
 {#foreach $T.table as row} 
 <tr><td>{$T.row.Id}</td><td>{$T.row.Title}</td><td>{$T.row.CreateDate}</td></tr> 
 {#/for} 
 </table> 
 </p>

3、渲染模板并展示

<script type="text/javascript">  
         $(document).ready(function() { 
             // 设置模板 
             $("#result").setTemplateElement("templateContainer"); 
              
             // 处理模板 
             $("#result").processTemplate(data); 
         });  
     </script>

加载模板

这次把模板放到一个单独的页面中，而不是直接写在页面里。

新建一个template.html，放入以下代码：

<strong>{$T.name} : {$T.list_id}</strong>
 <table>
     <tr>
    <th>编号</th>
    <th>姓名</th>
             <th>年龄</th>
    <th>邮箱</th>
  </tr>
  {#foreach $T.table as record}
  <tr>
    <td>{$T.record.id}</td>
    <td>{$T.record.name}</td>
             <td>{$T.record.age}</td>
    <td>{$T.record.mail}</td>
  </tr>
  {#/for}
 </table>

然后新建一个json文件，名称为cs.json，代码如下：

{
  name: "用户列表",
  list_id: "编号89757",
     table: [
     {id: 1, name: 'Rain', age: 22, mail:  'cssrain@domain.com'},
     {id: 2, name: '皮特', age: 24, mail:  'cssrain@domain.com'},
     {id: 3, name: '卡卡', age: 20, mail:  'cssrain@domain.com'},
     {id: 4, name: '戏戏', age: 26, mail:  'cssrain@domain.com'},
     {id: 5, name: '一揪', age: 25, mail:  'cssrain@domain.com'}
  ]
 }在jQuery中，可以通过$.ajax()方法来加载 json文件，代码如下：
 <script type="text/javascript">
 $(function(){
  $.ajax({
      type:       "post",
      dataType:   "json",
      url:        "cs.json",
     success:    function(data){
                     .....
                 }
  });
 });
 </script>

在success回调函数里，首先需要设置模板，然后需要添加数据。如下代码所示：

ta){
                   // 设置模板
                      $("#result1").setTemplateURL("template.html?date="+(+new Date()), null, {filter_data: true});
                    //  加载数据
                      $("#result1").processTemplate(data);
                 }
  }

完整代码如下所示：

$(function(){
  $.ajax({
      type:       "post",
      dataType:   "json",
      url:        "cs.json",
     success:    function(data){
                     $("#result1").setTemplateURL("template.html?date="+(+new Date()), null, {filter_data: true});
                     $("#result1").processTemplate(data);
                 }
  });
 });

设置模板的几种方法：

a. setTemplateElement:参数为页面中的一个元素ID
如上面的例子

b. setTemplate: 参数为具体的模板内容，
如：$("#result").setTemplate("Template by {$T.bold()} version <em>{$Q.version}</em>.");

c.setTemplateURL:使用外部独立模板文件Url作为参数
如：$("#result").setTemplateURL("example_multitemplate1.tpl");

4、运行结果：

语法分析：

　　　jTemplates包含三个预定全局变量，分别是$T、$P、$Q。$T为模板提供数据调用功能，$P为模板提供参数变量调用功能，$Q.version提供当前jTemplate的版本

jTemplates还支持#if、#for、#cycle、#foreach、#include、#param标签，帮助你处理实现复杂的业务情形。

#if 语法
 
{#if |COND|}..{#elseif |COND|}..{#else}..{#/if}
 
 
#if 示例:
 
  
 
{#if $T.hello} hello world. {#/if}
 
 
{#if 2*8==16} good {#else} fail {#/if}
 
 
{#if $T.age>=18)} 成人了 {#else} 未成年 {#/if}
 
 
{#if $T.list_id == 3} System list {#elseif $T.list_id == 4} Users List {#elseif $T.list_id == 5} Errors list {#/if}
 
 
 
 
 
#for 语法 
{#for |VAR| = |CODE| to |CODE| [step=|CODE|]}..{#else}..{#/for}
   
 
或
  
{#for |variable| = |start| to |end| [step=|stepBy|]}..{#else}..{#/for}

#for 示例：

默认步长：{#for index = 1 to 10} {$T.index} {#/for}

正向步长：{#for index = 1 to 10 step=3} {$T.index} {#/for}

负向步长及空循环：{#for index = 1 to 10 step=-3} {$T.index} {#else} nothing {#/for}

也可以在循环中使用变量：{#for index = $T.start to $T.end step=$T.step} {$T.index} {#/for}

说明：{#else}是在{#for...}未能执行的时的输出内容。

#foreach 语法

{#foreach |VAR| as |NAME| [begin=|CODE|] [count=|CODE|] [step=|CODE|]}..{#else}..{#/for}

#foreach 示例：

默认：{#foreach $T.table as record} {$T.record.name} {#/for}

指定起始位置：{#foreach $T.table as record begin=1} {$T.record.name} {#/for}

指定起始和循环次数：{#foreach $T.table as record begin=1 count=2} {$T.record.name} {#/for}

指定步长：{#foreach $T.table as record step=2} {$T.record.name} {#/for}

#foreach 内定环境变量：

$index- index of elementin table
   
 
$iteration- id of iteration (next number begin from 0)
   
 
$first- is first iteration?
   
 
$last- is last iteration?
   
 
$total- total number of iterations
   
 
$key- key in object (name of element) (0.6.0+)
   
 
$typeof - type of element (0.6.0+)
   
 
#foreach 示例所需要的数据：
   
 
var data = {
   
 
name:'User list',
   
 
list_id:4,
   
 
table: [
  
{id:1, name: 'Anne', age: 22, mail: 'anne@domain.com'},
   
 
{id:2, name: 'Amelie', age: 24, mail: 'amelie@domain.com'},
   
 
{id:3, name: 'Polly', age: 18, mail: 'polly@domain.com'},
   
 
{id:4, name: 'Alice', age: 26, mail: 'alice@domain.com'},
   
 
{id:5, name: 'Martha', age: 25, mail: 'martha@domain.com'}
  ] 
 
(
  } 
 
;0.7.0+)版以后新增的功能，支持待循环集合用函数代替：
   
 
{#foreach|FUNC| as |NAME| [begin=|CODE|] [end=|CODE|] [count=|CODE|] [step=|CODE|]}..{#else}..{#/for}

例：

f= function(step) {
   
 
if(step > 100)returnnull;// stop if loop is too long
   
 
return "Step " + step;
  }; 
 
"#result").setTemplate("{#foreach f as funcValue begin=10 end=20} {$T.funcValue}<br/> {#/for}");
  $( 
 
("#result").processTemplate();
  $

foreach在每次循环时请求的就是f函数，然后传递参数给f使用，并返回结果给funcValue变量

#cycle 语法

{#cycle values=|ARRAY|}

功能：提供周期性的调用，在循环中实现交替样式功能时可用到

示例：

cle values=[1,2,3,4]}

{#c

面模板在执行循环时，就会周期性的调用#cycle数组中的值，这样就能实现行交替的效果:

下<table width=\"200\">

{#foreach $T.table as row}
  
<tr bgcolor=\"{#cycle values=['#AAAAAA','#CCCCCC']}\">
   
 
<td>{$T.row.name.link('mailto:'+$T.row.mail)}</td>
   
 
</tr>
   
 
{#/for}
   
 
</table>
  
 
#include 语法
 
{#include |NAME| [root=|VAR|]}

功能：提供子模板调用

示例：

mplate MAIN}{
  
{#t
  
e*this is comment *}
   
 
{$T} {* $T == $T.toSource() *}
  
<table>
   
 
{#foreach $T.table as record}
  
{#include ROW root=$T.record}
   
 
{#/for}
  
</table>
  
{#/template MAIN}
   
    
 
{#template ROW}
   
 
<tr class="values=['bcEEC','bcCEE']} {#cycle">
   
 
<td>{$T.name}</td>
 <td>{$T.mail}</td></tr>  
{#/template ROW}

说明：{#template MAIN} 是指定模板的主要部分，必不可少。

{#template ROW}是定义一个名为“ROW”的子模板。

=$T.record}是主模板调用“ROW”子模板，并传递参数$T.record

{#include ROW roo

#param 语法

{#param name=|NAME| value=|CODE|}

功能：定义模板内的局部变量参数，使用$P调用。

示例：

"#result").setTemplate("{#param name=x value=888}{$P.x}");
  
$
  
(
  
("#result").processTemplate();
     
 
$

出结果：888

输

例：

示

$("#result").setTemplate("{#param name=x value=$P.x+1}{$P.x}");
   
 
$("#result").setParam('x', 777);
   
 
$("#result").processTemplate();

输出结果：778

示例：

$("#result").setTemplate("<ul>{#foreach $T.table as row}<li>{$P.x} {$T.row.name}</li>{#param name=x value=$P.x+3}{#/for}<ul>");
   
 
$("#result").setParam('x', 1);
   
 
$("#result").processTemplate(data);

需要数据：

var data = {
   
 
name:'User list',
   
 
list_id:4,
   
 
table: [
  
{id:1, name: 'Anne', age: 22, mail: 'anne@domain.com'},
   
 
{id:2, name: 'Amelie', age: 24, mail: 'amelie@domain.com'},
   
 
{id:3, name: 'Polly', age: 18, mail: 'polly@domain.com'},
   
 
{id:4, name: 'Alice', age: 26, mail: 'alice@domain.com'},
   
 
{id:5, name: 'Martha', age: 25, mail: 'martha@domain.com'}
   
 
]
  
输
   
 
}
  
;出结果：
  
#1 Anne
   
 
#4 Amelia
   
 
#7 Polly
   
 
#10 Alice
   
 
#13 Martha

jTemplate适用于少量数据，数据量较大时建议使用XML。

4：还可以使用循环\判断等语句, 减少工作量

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。