zoukankan      html  css  js  c++  java
  • jTemplates用法

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

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

    最基础的应用: 

    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:"XXX",age:"24"}; 

    5.调用方法: 

      $("#jTemplatesTest").setTemplateElement("template");//template指模板容器(这里是textarea)的ID; 
    也可以直接将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">你好:XXX,你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);  

     

  • 相关阅读:
    .NET2.0基础类库中的范型——FunctionalProgramming
    原则
    080711 30℃
    关于mcp
    080714 33℃
    080715 31℃
    080716 30℃
    11号
    iOS-调用系统的短信和发送邮件功能,实现短信分享邮件分享
    UIView总结
  • 原文地址:https://www.cnblogs.com/guke/p/2609871.html
Copyright © 2011-2022 走看看