jQuery tmpl用法总结

之前很是头疼循环数据的渲染,搞一大堆的命名,一点点的赋值,很是麻烦,今天学习了一下jQuery插件tmpl,下面抛出一些使用方法,供以后参考:

官方网址:http://web.archive.org/web/20121014080309/http://api.jquery.com/jquery.tmpl/

github网址:https://github.com/jquery/jquery-tmpl        http://jquery.github.com/jquery-tmpl/demos/step-by-step.html

下面重点介绍一下使用方法:

首先介绍一下  模板和数据,不用说这两个肯定是不可缺少的

模板有两种定义方法,下面给出具体code

1.

  1. var markup = "<li>Some content: ${item}.<br/>"
  2. + " More content: ${myValue}.</li>";
  3. $.template( "movieTemplate", markup );

2.

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

这样就定义了两种模板,前一种写到script里边,后边一种写到html里边

数据用json

下面开始渲染模板
$( "#movieTemplate" ).tmpl( movies ).appendTo( "#movieList" );
$.tmpl( "movieTemplate", movies ).appendTo( "#movieList" );
注意:movies是json数据数组

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

下面给出一些更深层次的操作数据的方法
1.判断:

  1. <script id="movieTemplate" type="text/x-jquery-tmpl">
  2. <tr>
  3. <td>${Title}</td>
  4. <td>
  5. {{if Languages}}
  6. Alternative languages: <em>${Languages}</em>.
  7. {{else Subtitles}}
  8. Original language only...
  9. Subtitles in <em>${Subtitles}</em>.
  10. {{else}}
  11. Original version only, without subtitles.
  12. {{/if}}
  13. </td>
  14. </tr>
  15. </script>

2.遍历(tmpl会遍历普通数据,但是有时候数据是模板数据对象里边还嵌套这数组等等)

  1. var movies = [
  2. {
  3. Title: "Meet Joe Black",
  4. Languages: [
  5. { Name: "English" },
  6. { Name: "French" }
  7. ]
  8. }
  9. ];
  1. <script id="movieTemplate" type="text/x-jquery-tmpl">
  2. <tr>
  3. <td>${Title}</td>
  4. <td>Languages:
  5. <em>
  6. {{each Languages}}
  7. ${$value.Name}
  8. {{/each}}
  9. </em>
  10. </td>
  11. </tr>
  12. </script>

注意:判断语句里边不要加空格最好不要有空格

3.在应用中有时候想给模板里边填充一部分html代码

  1. <script id="movieTemplate" type="text/x-jquery-tmpl">
  2. <tr>
  3. <td>${Title}</td>
  4. <td class="synopsis">{{html Synopsis}}</td>
  5. </tr>
  6. </script>

4.应用中有时候也需要对数据进行一下处理

    1. var markup = "<li>Some content: ${$item.myMethod()}.<br/>"
    2. + " More content: ${$item.myValue}.</li>";
    3. $.template( "movieTemplate", markup );
    4. $.tmpl( "movieTemplate", movies,
    5. {
    6. myValue: "somevalue",
    7. myMethod: function() {
    8. return "something";
    9. }
    10. }
    11. ).appendTo( "#movieList" );
上一篇:Nginx是如何配置为 Web 服务器的【转载】


下一篇:c++ 副本构造器