Jquery tmpl的使用

大家好，又见面了，我是你们的朋友全栈君。

jquery tmpl简介：动态请求数据更新页面非常常用的方法，例如博客评论的分页动态加载，微博的滚动加载和定时请求加载以及ajax请求返回数据等。

这些情况下，动态请求返回的数据一般不是已拼好的html就是JSON或XML，总之不在浏览器端拼接数据就在服务器端拼接数据。

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

因此，一些用模板生成HTML的框架相继出现jquery.tmpl就是其中一种，下面讲一下jquery.tmpl的使用语法，可分为三大类：

1、显示类
{
{html}}/{
{= }}/${}，这三个标签多能够将数据输出到模板中，但是{
{html}}不会对数据进行编码，用于输出数据中的HTML代码段，
而{
{=}}和${}怎会对数据进行编码，防止数据对于模板结构的破坏。
2、条件判断及循环
{
{if}}/{
{else}}/{
{/if}}/{
{each}}请注意是没有for/while/switch的，相对来说jquery Tmpl只支持
较为简单的逻辑判断，当然如果你感觉这些满足不了你的需求的话，可以自己写函数然后调用。
3、复用类
{
{tmpl}}当分支模板过长（写在一个模板中较为轮乱）或者使用已经写好的通用模板，{
{temp}}的作用就是
调用指定ID模板来显示数据。

下面具体写个例子表现一下：

例1：通过直接写json字符串的形式引入数据。

    [html] 
view plain
copy
<div style=“margin-top: 30px;”>  
            <h3>地区</h3>  
            <div id=“place”></div>  
        </div>  
        <script src=“js/jquery-1.11.1.min.js”></script>  
        <script src=“js/jquery.tmpl.js”></script>  
        <script type=“text/tmpl” id=“temp”>  
            <span style=“margin: 0 6px;”>${place}</span>  
        </script>  
        <script>  
            var origin={  
                plc:[  
                    {place:’上海’},  
                    {place:’深圳’},  
                    {place:’北京’},  
                    {place:’广州’}  
                ]  
            };  
            $(‘#temp’).tmpl(origin.plc).appendTo(‘#place’);  
        </script>  

例2：通过getJSON引入json数据。

    [html] 
view plain
copy
<div style=“margin-top: 30px;”>  
            <h3>地区</h3>  
            <div id=“place”></div>  
        </div>  
        <script src=“js/jquery-1.11.1.min.js”></script>  
        <script src=“js/jquery.tmpl.js”></script>  
        <script type=“text/tmpl” id=“temp”>  
            <span style=“margin: 0 6px;”>${place}</span>  
        </script>  
        <script>  
            $.getJSON(‘json/place.json’,function(data){  
                //通过拼接字符串的形式书写  
                /*var str=“”;  
                for(var i=0;i<data.plc.length;i++){  
                    str+=’<span style=“margin: 0 6px;”>‘+data.plc[i].place+’</span>‘;  
                    console.log(“str:”+str);  
                }  
                $(‘#place’).append(str);  
                */  
                //tmpl形式  
                $(‘#temp’).tmpl(data.plc).appendTo(‘#place’);  
            });  
        </script>  

place.json数据内容为：

{

“plc”:[
{“place”:”上海”},
{“place”:”深圳”},
{“place”:”北京”},
{“place”:”广州”}
]
}
例3：读取多个参数信息。

    [html] 
view plain
copy
<div class=“container”>  
            <table border=“1px” cellpadding=“5” cellspacing=“0” width=“100%”>  
                <thead>  
                    <tr>  
                        <td>firstName</td>  
                        <td>lastName</td>  
                        <td>email</td>  
                        <td>place</td>  
                    </tr>  
                </thead>  
                <tbody id=“tbody”></tbody>  
            </table>  
            <table border=“1px” cellpadding=“5” cellspacing=“0” width=“100%” style=“margin-top: 30px;”>  
                <thead>  
                    <tr>  
                        <td>Name</td>  
                        <td>Level</td>  
                        <td>img</td>  
                    </tr>  
                </thead>  
                <tbody id=“tbody2”></tbody>  
            </table>  
        </div>  
        <script src=“js/jquery-1.11.1.min.js”></script>  
        <script src=“js/jquery.tmpl.js”></script>  
        <script type=“text/tmpl”  id=“temp”>  
            <tr>  
                <td>${firstName}</td>  
                <td>{

     {= lastName}}</td>  
                <td>{

     {html email}}</td>  
                <td>{

     {html place}}</td>  
            </tr>  
        </script>  
        <script type=“text/tmpl” id=“temp2”>  
            <tr>  
                <td>${name}</td>  
                <td>${level}</td>  
                <td><img src=“${img}”/></td>  
            </tr>  
        </script>  
        <script>  
            $.getJSON(“json/test.json”,{},function(data){  
                $(‘#temp’).tmpl(data.programmers).appendTo(‘#tbody’);  
                $(‘#temp2’).tmpl(data.authors).appendTo(‘#tbody2’);  
            });  
        </script>  

test.json数据内容为：

{

“programmers”:[
{“firstName”:”Lucy”,”lastName”:”zhao”,”email”:”123456″,”place”:”上海”},
{“firstName”:”Tizzy T”,”lastName”:”wang”,”email”:”123″,”place”:”北京”}
],
“authors”:[
{“name”:”Any”,”level”:”one”,”img”:”./img/foot_21.png”},
{“name”:”cool”,”level”:”two”,”img”:”img/foot_31.png”},
{“name”:”Luck”,”level”:”three”,”img”:”img/foot_41.png”}
],
“origin”:[
{“place”:”上海”},
{“place”:”深圳”},
{“place”:”北京”},
{“place”:”广州”}
]
}