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);  

     

  • 相关阅读:
    HTTP断点续传 规格严格
    Java Shutdown 规格严格
    linux 命令源码 规格严格
    JTable调整列宽 规格严格
    linux 多CPU 规格严格
    Hello can not find git path 规格严格
    Kill 规格严格
    拜拜牛人 规格严格
    Swing 规格严格
    Debugging hangs in JVM (on AIX but methodology applicable to other platforms) 规格严格
  • 原文地址:https://www.cnblogs.com/guke/p/2609871.html
Copyright © 2011-2022 走看看