现在位置首页 / 项目实战 /正文

jquery模板引擎-jquery.tmpl使用详解

作者: IT小兵 | 2014年12月26日| 热度:℃ | 评论: |参与:

说到jquery的模板引擎,我们可能使用了很多,比如:Tempo 、mustache.js 、kite 、jQote2 、JsRender 、NANO等等。

今天分享一下一个简约而不简单的jquery模板:jquery.tmpl。

tmpl,是由微软想jQuery官方贡献的模板插件,网址:http://api.jquery.com/jquery.tmpl/

    Tmpl提供了几种tag:

  1. ${}:等同于{{=}},是输出变量,通过了html编码的。

  2. {{html}}:输出变量html,但是没有html编码,适合输出html代码。

  3. {{if }} {{else}}:提供了分支逻辑。

  4. {{each}}:提供循环逻辑,$value访问迭代变量。

下面一个简单的模板tmpl实例:(代码最能说明一切)

效果:

image

代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Tmpl.aspx.cs" Inherits="Tmpl" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Script/jquery-1.6.4.js" type="text/javascript"></script>
    <script src="Script/jquery-jquery-tmpl-07d08cb/jquery.tmpl.js" type="text/javascript"></script>
    <script id="studentsTemplate" type="text/x-jquery-tmpl">
     <tr>
                    <td style="width:20px;" >
                 {{if Class&&Class.length>0}}  <img src="Image/folder_o.png" class="detailsImg" />  {{/if}}
                    </td>
                    <td>
                     ${Name}
                    </td>
                    <td>
                        ${Sex}
                    </td>
                    <td style="text-align:center;"><a href="javascript:AjaxDeleteInvoke(${ID})">删除</td>
                </tr>
                {{if Class&&Class.length>0}}
                <tr><td colspan="4">
                
                <table style=" margin:0px; " cellpadding="0" cellspacing="0" width="100%">
            <thead>
                <tr style="text-align:center; font-size:large; font-weight:bolder;">
                    <td>
                        班级名
                    </td>
                    <td>
                        人数
                    </td>                    
                </tr>
            </thead>
            <tbody>
            {{each Class}}           
           <tr {{if $value.Count>16}} style="background:red;" {{else  $value.Count>12}}style="background:yellow;"  {{/if}}><td> ${$value.ClassName} </td><td>  ${$value.Count} </td></tr>
            {{/each}}
            </tbody></table>           
                </td>    </tr>
                 {{/if}}
    </script>
    <script type="text/javascript">
        ; String.format = function() {
            var s = arguments[0];
            for (var i = 0; i < arguments.length - 1; i++) {
                var reg = new RegExp("\\{" + i + "\\}", "gm");
                s = s.replace(reg, arguments[i + 1]);
            }
            return s;
        };
        function AjaxDeleteInvoke(id) {
            alert(String.format("AjaxDeleteInvoke:id={0}", id));
        }
        $(function() {
            var data = new Array();
            for (var i = 0; i < 19; i++) {
                data.push(
                {
                    Name: String.format("学生{0}", i),
                    Sex: i % 2 == 0 ? "男" : "女",
                    ID: i,
                    Class:
                    [
                        {
                            ClassName: String.format("Class{0}", i),
                            Count: (i + 10) / 2
                        },
                         {
                             ClassName: String.format("Class2{0}", i),
                             Count: (i + 20) / 2
                         }
                   ]
                });
            }
            // alert($("#studentsTemplate").tmpl(data).htm());
            $("#studentsTemplate").tmpl(data).appendTo("#test>tbody");
            $("#test>tbody table").hide();
            $(".detailsImg").live("click", function() {
                var state = $(this).data("state");
                var $tr = $(this).parent().parent();
                if (state == "o") {
                    $("table", $tr.next()).hide();
                    $(this).data("state", "c");
                    $(this).attr("src", "Image/folder_o.png");
                } else {
                    $("table", $tr.next()).show();
                    $(this).data("state", "o");
                    $(this).attr("src", "Image/folder_c.png");
                }
            });
        });  
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="div1">
        <table style="margin-top: 10; margin-left: 300px;" border="1" cellpadding="0" cellspacing="0"
            id="test" width="500">
            <thead>
                <tr style="text-align: center; font-size: larger; font-weight: bolder;">
                    <td>
                        ID
                    </td>
                    <td>
                        姓名
                    </td>
                    <td>
                        性别
                    </td>
                    <td>
                        操作
                    </td>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    </form>
</body>
</html>

 demo下载 可以直接下载demo学习代码。

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

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

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

因此一些用模版生成HTML的的框架相继出现jquery.tmpl 就是其中的一种,下面我们来详细介绍下jquery.tmpl的用法

jquery.tmpl的几种常用标签分别有:

${}{{each}}{{if}}{{else}}{{html}}

不常用标签

 {{=}},{{tmpl}} and {{wrap}}.

下面一一说明这些标签是怎么使用的。

${}等同与{{=}}是输出变量 ${}里面还可以放表达式 (=和变量之间一定要有空格,否则无效

示例:

<div id="div_demo">
</div>
<script id="demo" type="text/x-jquery-tmpl">
    <div style="margin-bottom:10px;">
      <span>${ID}</span>
      <span style="margin-left:10px;">{{= Name}}</span>
      <span style="margin-left:10px;">${Number(Num)+1}</span>
      <span style="margin-left:10px;">${Status}</span>
    </div>
</script>
<script type="text/javascript">
  var users = [{ ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 }, { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'}];
  $("#demo").tmpl(users).appendTo('#div_demo');
</script>

{{each}} 提供循环逻辑,$value访问迭代变量 也可以自定义迭代变量(i,value)

示例:

<div id="div_each">
</div>
<script id="each" type="text/x-jquery-tmpl"> 
    <h3>users</h3>
    {{each(i,user) users}}
        <div>${i+1}:{{= user.name}}</div>
        {{if i==0}}
            <h4>group</h4>
            {{each(j,group) groups}}
                <div>${group.name}</div>
            {{/each}}
        {{/if}}
    {{/each}}
    <h3>depart</h3>
    {{each departs}}
        <div>{{= $value.name}}</div>
    {{/each}}
</script> 
<script type="text/javascript">
  var eachData = { users: [{ name: 'jerry' }, { name: 'john'}], groups: [{ name: 'mingdao' }, { name: 'meihua' }, { name: 'test'}], departs: [{ name: 'IT'}] };
  $("#each").tmpl(eachData).appendTo('#div_each');
</script>

{{if }} {{else}}提供了分支逻辑 {{else}} 相当于else if

示例:

<div id="div_ifelse"></div>
<script id="ifelse" type="text/x-jquery-tmpl"> 
    <div style="margin-bottom:10px;"><span>${ID}</span><span style="margin-left:10px;">{{= Name}}</span>
        {{if Status}}
            <span>Status${Status}</span>
        {{else App}}
            <span>App${App}</span>
        {{else}}
            <span>None</span>
        {{/if}}
    </div>
</script> 
<script type="text/javascript">
  var users = [{ ID: 'think8848', Name: 'Joseph Chan', Status: 1, App: 0 }, { ID: 'aCloud', Name: 'Mary Cheung', App: 1 }, { ID: 'bMingdao', Name: 'Jerry Jin'}];
    $("#ifelse").tmpl(users).appendTo('#div_ifelse');
</script>

{{html}} 输出变量html,但是没有html编码,适合输出html代码

 实例

<div id="div_html"></div>
<script id="html" type="text/x-jquery-tmpl"> 
    <div style="margin-bottom:10px;">
    <span>${ID}</span>
    <span style="margin-left:10px;">{{= Name}}</span>
      ${html}
      {{html html}}
    </div>
</script> 
<script type="text/javascript">
  var user = { ID: 'think8848', Name: 'Joseph Chan', html: '<button>html</button>' };
   $("#html").tmpl(user).appendTo('#div_html');
</script>

{{tmpl}} 嵌套模版

实例

<div id="tmpl"></div>
<script id="tmpl1" type="text/x-jquery-tmpl">
    <div style="margin-bottom:10px;">
      <span>${ID}</span>
      <span style="margin-left:10px;">{{tmpl($data) '#tmpl2'}}</span>
    </div>     
</script>
<script id="tmpl2" type="type/x-jquery-tmpl">
    {{each Name}}${$value}  {{/each}}   
</script>
<script type="text/javascript">
  var users = [{ ID: 'think8848', Name: ['Joseph', 'Chan'] }, { ID: 'aCloud', Name: ['Mary', 'Cheung']}];
   $("#tmpl1").tmpl(users).appendTo('#tmpl');
</script>

{{wrap}},包装器

实例

<div id="wrapDemo">
    </div>
<script id="myTmpl" type="text/x-jquery-tmpl">
    The following wraps and reorders some HTML content:
    {{wrap "#tableWrapper"}}
        <h3>One</h3>
        <div>
            First <b>content</b>
        </div>
        <h3>Two</h3>
        <div>
            And <em>more</em> <b>content</b>...
        </div>
    {{/wrap}}
    </script>
<script id="tableWrapper" type="text/x-jquery-tmpl">
    <table cellspacing="0" cellpadding="3" border="1"><tbody>
        <tr>
            {{each $item.html("h3", true)}}
                <td>
                    ${$value}
                </td>
            {{/each}}
        </tr>
        <tr>
            {{each $item.html("div")}}
                <td>
                    {{html $value}}
                </td>
            {{/each}}
        </tr>
    </tbody></table>
    </script>
 <script type="text/javascript">
        $(function () {
            $('#myTmpl').tmpl().appendTo('#wrapDemo');
        });
    </script>

$data $item $item代表当前的模板;$data代表当前的数据。

 

 实例:

<div id="div_item_data"></div>
<script id="item_data" type="text/x-jquery-tmpl"> 
     <div style="margin-bottom:10px;">
    <span>${$data.ID}</span>
    <span style="margin-left:10px;">${$item.getName(" ")}</span>
   </div>
</script> 
<script type="text/javascript">
   var users = [{ ID: 'think8848', Name: ['Joseph', 'Chan'] }, { ID: 'aCloud', Name: ['Mary', 'Cheung']}];
     $("#item_data").tmpl(users,
                {
                getName: function (spr) {
                   return this.data.Name.join(spr);
                }
                }).appendTo('#div_item_data');
</script>

$.tmplItem()方法,使用这个方法,可以获取从render出来的元素上重新获取$item

实例

<script type="text/javascript">  $('#demo').delegate('div', 'click', function () {                var item = $.tmplItem(this);
                alert(item.data.Name);
            });</script>


参考:

http://www.cnblogs.com/zhuzhiyuan/p/3510175.html

点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询