zoukankan      html  css  js  c++  java
  • jQuery .tmpl() 用法

     

    博客分类:
     

    动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等。

    这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在浏览器端拼数据就在服务器端拼数据。不过,从传输量方面来看,返回 HTML 不划算,而在 web 传输方面,现在更多的是使用 JSON 而不是 XML。

    浏览器端根据 JSON 生成 HTML 有个很苦恼的地方就是,结构不复杂的时候还好,结构一复杂,就想死了,需要很小心很小心地写出几乎无法维护的 JavaScript 代码。

    如同为解决 PHP 拼数据这方面的问题而有了 Smarty 这些模版,JavaScript 也可以利用模版来解决这些问题,比如基于 jQuery 的 jquery.tmpl,现在已经被接受为官方的模版插件了。详细的 API 在 jQuery 的 Templates 里,内置的 demo 也尽情地演示了各种用法。

    就我自己的几次使用,感觉很不错,用更加直观方面的 HTML 写法而不是 JavaScript 拼凑 来写结构,然后用 JSON 变量来占位的方式来填充数据,代码看起来好多了。

    来源: http://liunian.info/jquery-tmpl.html

    Tmpl提供了几种tag:

    ${}:等同于{{=}},是输出变量,通过了html编码的。
    {{html}}:输出变量html,但是没有html编码,适合输出html代码。
    {{if }} {{else}}:提供了分支逻辑。
    {{each}}:提供循环逻辑,$value访问迭代变量。

    jquery tmpl的使用方法:

    模板定义:


    方法一:

    Js代码  收藏代码
    1. <script id="movieTemplate" type="text/x-jquery-tmpl">  
    2. <li>  
    3. <b>${Name}</b> (${ReleaseYear})  
    4. </li>  
    5. </script>  

     
    方法二:

    Js代码  收藏代码
    1. function makeTemplate(){  
    2. var markup=’<li><b>${Name}</b> (${ReleaseYear})</li>‘;  
    3. $.template(“movieTemplate”, markup);  
    4. }   

     
    DATA:

    Js代码  收藏代码
    1. var movies = [  
    2. { Name: "The Red Violin", ReleaseYear: "1998" },  
    3. { Name: "Eyes Wide Shut", ReleaseYear: "1999" },  
    4. { Name: "The Inheritance", ReleaseYear: "1976" }  
    5. ];  

     
    Script:

    Js代码  收藏代码
    1. $( "#movieTemplate" ).tmpl( movies )  
    2. .appendTo( "#movieList" );  

    来源:http://www.blogjava.net/bang/archive/2012/03/06/371306.html

    实例1:

    Html代码  收藏代码
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.   <script src="http://code.jquery.com/jquery-latest.min.js"></script>  
    5.   <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>  
    6. </head>  
    7. <body>  
    8.       
    9.     <ul class="param-list"></ul>  
    10.               
    11.     <script type="text/x-jquery-tmpl" id="new-param-tmpl">  
    12.         <li rel="${num}">  
    13.             <input type="text" name="key[${num}]" value="${key}" placeholder="key" /> =   
    14.             <input type="text" name="value[${num}]" value="${value}" placeholder="value" />   
    15.             <button type="button" class="button small remove-param"><img src="http://mediacdn.disqus.com/1338845651/images/v3/icon/16/69.png" height="12" alt=""/></button>   
    16.             <button type="button" class="button small add-param"><span><img src="http://mediacdn.disqus.com/1338845651/images/v3/icon/16/13.png" height="12" alt=""/></button>  
    17.         </li>  
    18.     </script>  
    19.   
    20.     <script>  
    21.         $(function(){  
    22.             function addParam(key, value) {  
    23.                 var param_list = $('.param-list');  
    24.                 var num = param_list.find('li').length;  
    25.   
    26.                 // build a template to clone the current row  
    27.                 var built = $('#new-param-tmpl').tmpl({  
    28.                     num: num,  
    29.                     key: key || '',  
    30.                     value: value || '',  
    31.                 });  
    32.                 if (key) param_list.prepend(built);  
    33.                 else param_list.append(built);  
    34.   
    35.                 param_list.find('li:not(:last) .add-param').hide();  
    36.                 param_list.find('li:last .add-param').show();  
    37.                 param_list.find('li:not(:last) .remove-param').show();  
    38.                 param_list.find('li:last .remove-param').hide();      
    39.             }  
    40.   
    41.             // bind events  
    42.             $('.param-list .remove-param').live('click', function(){  
    43.                 $(this).parent().remove();  
    44.                 return false;  
    45.             });  
    46.             $('.param-list .add-param').live('click', function(){  
    47.                 addParam();  
    48.                 return false;  
    49.             });  
    50.               
    51.             addParam();  
    52.         })  
    53.   
    54.           
    55.     </script>  
    56. </body>  
    57. </html>  

     实例2

    Html代码  收藏代码
      1. <ul id="movieList"></ul>  
      2.   
      3. <script id="movieTemplate" type="text/x-jquery-tmpl">  
      4.     <li><b>${Name}</b> (${ReleaseYear})</li>  
      5. </script>  
      6.   
      7. <script type="text/javascript">  
      8.     var movies = [  
      9.         { Name: "The Red Violin", ReleaseYear: "1998" },  
      10.         { Name: "Eyes Wide Shut", ReleaseYear: "1999" },  
      11.         { Name: "The Inheritance", ReleaseYear: "1976" }  
      12.     ];  
      13.   
      14.     // Render the template with the movies data and insert  
      15.     // the rendered HTML under the "movieList" element  
      16.     $( "#movieTemplate" ).tmpl( movies )  
      17.         .appendTo( "#movieList" );  
      18. </script> 
  • 相关阅读:
    Codeforces Round 546 (Div. 2)
    Codeforces Round 545 (Div. 2)
    Codeforces Round 544(Div. 3)
    牛客小白月赛12
    Codeforces Round 261(Div. 2)
    Codeforces Round 260(Div. 2)
    Codeforces Round 259(Div. 2)
    Codeforces Round 258(Div. 2)
    Codeforces Round 257 (Div. 2)
    《A First Course in Probability》-chaper5-连续型随机变量-随机变量函数的分布
  • 原文地址:https://www.cnblogs.com/hemei/p/3727962.html
Copyright © 2011-2022 走看看