JS模板引擎jTemplates使用笔记详解

</pre></h1><p><span style="font-size:24px; color:#3333ff">1、jTemplate简介</span>：</p><p><span style="white-space:pre"></span>jTemplates是一个基于Jquery的js模板引擎插件。该引擎全部代码由JS实现，可以配合AJAX,JSON一起协同工作，模板内容可以用JS代码，实现了活动更新，可以自动从服务器更新模板生成的内容。 </p><p><span style="white-space:pre"></span>使用jTemplates,<span style="font-family:arial; font-size:13px; line-height:18px">服务端只需要把对象集合序列化成json格式并传入客户端，客户端再把json对象填充模版生成列表，这样一服务端传输的只是json格式的字符串，传输的数据量可是大大减少了，二遍历绑定的工作转移到了客户端，大大减轻了服务端的压力。</span></p><p><span style="white-space:pre"></span>jTemplates能免费应用于商业和非商业。下载地址：<a target=_blank target="_blank" href="http://jtemplates.tpython.com/">http://jtemplates.tpython.com/</a></p><div class="cnblogs_code" style="margin:5px 0px; padding:5px; background-color:rgb(245,245,245); border:1px solid rgb(204,204,204); overflow:auto; font-family:'Courier New'!important"><span style="background-color:rgb(254,254,242); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:13px; line-height:19px">jTemplates的工作方式：1、</span><span style="font-family:Verdana,Arial,Helvetica,sans-serif; font-size:13px; line-height:1.5; margin:0px; padding:0px">setTemplate </span><span style="background-color:rgb(254,254,242); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:13px; line-height:19px">指定可处理的模版对象 2、</span><span style="font-family:Verdana,Arial,Helvetica,sans-serif; font-size:13px; line-height:1.5; margin:0px; padding:0px">processTemplate  对模版化的对象进行数据处理，实例介绍：</span></div><div class="cnblogs_code" style="margin:5px 0px; padding:5px; background-color:rgb(245,245,245); border:1px solid rgb(204,204,204); overflow:auto; font-family:'Courier New'!important"><span style="font-family:Verdana,Arial,Helvetica,sans-serif; font-size:13px; line-height:1.5; margin:0px; padding:0px"></span><pre code_snippet_id="436151" snippet_file_name="blog_20140727_2_8021345" name="code" class="javascript"><script type="text/javascript" src="jquery-1.2.6.pack.js"></script>  
<script type="text/javascript" src="jquery-jtemplates.js"></script>  
  
<script type="text/javascript">  
   $(document).ready(function() {  
    //初始化JSON数据  
    var data = {  
     name: '用户列表',  
     list_id: '编号89757',  
     table: [  
      {id: 1, name: 'Rain', age: 22, mail: '[email protected]'},  
      {id: 2, name: '皮特', age: 24, mail: '[email protected]'},  
      {id: 3, name: '卡卡', age: 20, mail: '[email protected]'},  
      {id: 4, name: '戏戏', age: 26, mail: '[email protected]'},  
      {id: 5, name: '一揪', age: 25, mail: '[email protected]'}  
     ]  
    };  
    // 附上模板  
    $("#result1").setTemplateElement("template");  
    // 给模板加载数据  
    $("#result1").processTemplate(data);  
   });   
</script> 

<!-- 模板内容 -->  
<textarea id="template" style="display:none">  
   <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>  
</textarea> 

<!-- 输出元素 -->  
<div id="result1" ></div> 

具体步骤：

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

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

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

2、. 然后建模版：

<!-- 结果容器 -->
 <div id="result_container"></div>

 

    <!-- 模版内容 -->
 <textarea id="template-items" style="display:none">

　　<table border="1" style="border-collapse:collapse">