码迷,mamicode.com
首页 > Web开发 > 详细

jquery.tmplate使用心得

时间:2017-09-08 18:38:46      阅读:214      评论:0      收藏:0      [点我收藏+]

标签:java   sel   整理   使用方法   问题   循环   讲解   ==   需要   

jquery.tmplate使用心得

jquery.tmpl.js是与jquey共同使用的html模板插件。该插件可通过简单的语法将数据放入到html模板中,可以很好的将数据渲染到页面上。该插件在本项目中使用较多且网上的讲解比较分散,无系统的api以及使用方法可以查询,故将jquery.tmpl.js的api整理出来,以方便大家使用。
        在使用之前一定要先加载jquery,并把jquery.tmpl.js加载进来
        一、目前使用比较多的api如下:
        1、判断类语法
                1).{{if}}语法
                        该语法很好理解与使用。主要用作判断。在{{if}}中加入判断条件,如果满足该条件就会执行之后的函数,否则就不会执行。举个例子:
                                {{if a == 10 }}
                                        <p>例子</p>
                                {{/if}}
                                在该例子中,只有当a = 10 的情况才会出现页面中才会出现<p>例子</p>这个标签,否则不会;另外一点,就是在使用jquery.tmpl.js的api的时候,一定要有闭合,如例子所示,一定要使用{{/if}}来对上面语法进行闭合,否则无法实现该语法;
                        切记:一定要闭合;
                2).{{else}}语法
                        既然存在{{if}}语法了,肯定也是会存在{{else}}语法的了,该语法的作用是在不满足在{{if}}中条件的时候才需要{{else}}语句,与javascript的语法很形似,同时,{{else}}语句与{{if}}语句同时存在。举个例子:
                                {{if a == 10}}
                                        <p>例子一</p>
                                {{else}}
                                        <p>例子二</p>
                                {{/if}}
                                在例子中,只有当 a = 10 的时候,页面中才会出现标签<p>例子一</p>,否则会出现标签<p>例子二</p>,
                                在{{if}}之中是一定需要{{/if}}标签来闭合的,但是{{else}}是不需要书写闭合的。
                3).${}语法
                        该语法主要用于简短的判断,一般适用于三目运算符。主要为 a==b ? a1 = 1: a1 = 2;  该语法也是用于判断是否符合条件,如果符合则执行前面的,否则会执行后面的;同时该语法内可以直接书写三目运算符。举个例子:
                        <span>${a ? 10 : 20}</span>
                                该段语法的意思为如果a存在,则<span></span>标签内的数据为10.否则为20;
        2、循环类语法
                4).{{each}}语法
                        该语法与javascript类似,起到循环的作用,可以对其后的数据进行遍历,然后将遍历的数据进行一系列的操作,另外从each中取得数据时经常与${}混合使用。同时,该语法也是需要进行闭合的。举个例子:
                                {{each(key,value),arr}}
                                        <li>${value}</li>
                                {{/each}}
                                该段语法的作用为将arr进行遍历,并将其中每个属性的value放入到li中,同样,each语法也是需要闭合的。
        3、使用类语法
                $(selectpr).tmpl(data)
                $(selector)为选择到的html模板,tmpl()之中的data就是所要传入html模板的数据;举个例子:
                        <div>
                                {{if data}}
                                        <ul>
                                                {{each(index,value) data}}
                                                        <li class=‘${index.className}‘>${index}</li>
                                                {{/each}}
                                        </ul>
                                {{/if}}
                                <span>{rows.data}</span>
                        </div>

                        将上部文件作为html模板时在js中使用

                        使用:$(html模板的名字).tmpl(res);

                        实际上res为{
                                "data":[12,23,12,12],
                                "rows":{‘data‘:‘1212121‘},
                                "message": 0
                        }
                        主要就是tmpl中的是数据,而且传过去的数据就可以直接在里面获取相应的值,然后对值进行操作。

        以上语法基本为在项目中使用较多的,其余还有一些api,包括{{html}}、{{wrap}}等,但是使用范围并不广,故不多做介绍。
二、以上为日常开发使用模板中使用较多的api。jquery.tmpl.js在好用的同时也存在一些缺陷,其中比较明显的就是,
        1、"="问题
        将变量赋值作为模板放入标签之中后,如果其中存在=的话,一定要在=的左右两边全部加上空格,否则会出现很多比较诡异的现象

三、结语:
        该文章为本人纯手码,将知识整理并汇总,希望看到的小伙伴能从中得到一些收获;
                                                                                                                                                        ------------@pandaClose

jquery.tmplate使用心得

标签:java   sel   整理   使用方法   问题   循环   讲解   ==   需要   

原文地址:http://www.cnblogs.com/pandaClose/p/7495233.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!