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的使用方法:

    模板定义:

    方法一:

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

    方法二:

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

    DATA:

    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:

    1 $( "#movieTemplate" ).tmpl( movies )
    2 .appendTo( "#movieList" );

    实例一:

     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>

    实例二:

     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>

    原文地址:http://justcoding.iteye.com/blog/1553602/

  • 相关阅读:
    evernote100个做笔记的好方法
    平衡二叉树的调整模版
    晨间日记的奇迹
    hdu 2952 Counting Sheep
    hdu 1535 Invitation Cards
    poj 3259 Wormholes(spfa)
    poj 2263 Heavy Cargo(floyd)
    poj 3268 Silver Cow Party(SPFA)
    hdu 1690 Bus System
    hdu 3631 Shortest Path(Floyd)
  • 原文地址:https://www.cnblogs.com/iack/p/3513527.html
Copyright © 2011-2022 走看看