jquery.tmplate模板引擎使用心得

jquery.tmpl.js， 是与jquey共同使用的html模板插件。该插件可通过简单的语法将数据放入到html模板中，可以很好的将数据渲染到页面上。该插
2023-11-24 技术
jquery.tmpl.js， 是与jquey共同使用的html模板插件。该插件可通过简单的语法将数据放入到html模板中，可以很好的将数据渲染到页面上。该插件在本项目中使用较多且网上的讲解比较分散，无系统的api以及使用方法可以查询，故将jquery.tmpl.js的api整理出来，以方便大家使用。         在使用之前一定要先加载jquery，并把jquery.tmpl.js加载进来          一、目前使用比较多的api如下：          1、判断类语法                  1).{{if}}语法                         该语法很好理解与使用。主要用作判断。在{{if}}中加入判断条件，如果满足该条件就会执行之后的函数，否则就不会执行。举个例子：                                 {{if a == 10 }}                                        

例子

                                {{/if}}                                 在该例子中，只有当a = 10 的情况才会出现页面中才会出现

例子

这个标签，否则不会；另外一点，就是在使用jquery.tmpl.js的api的时候，一定要有闭合，如例子所示，一定要使用{{/if}}来对上面语法进行闭合，否则无法实现该语法；                          切记：一定要闭合；                  2).{{else}}语法                         既然存在{{if}}语法了，肯定也是会存在{{else}}语法的了，该语法的作用是在不满足在{{if}}中条件的时候才需要{{else}}语句，与javascript的语法很形似，同时，{{else}}语句与{{if}}语句同时存在。举个例子：                                 {{if a == 10}}                                        

例子一

                                {{else}}                                        

例子二

                                {{/if}}                                 在例子中，只有当 a = 10 的时候，页面中才会出现标签

例子一

，否则会出现标签

例子二

，                                  在{{if}}之中是一定需要{{/if}}标签来闭合的，但是{{else}}是不需要书写闭合的。                  3).${}语法                         该语法主要用于简短的判断，一般适用于三目运算符。主要为 a==b ? a1 = 1: a1 = 2;  该语法也是用于判断是否符合条件，如果符合则执行前面的,否则会执行后面的；同时该语法内可以直接书写三目运算符。举个例子：                         ${a ? 10 : 20}                                 该段语法的意思为如果a存在，则标签内的数据为10.否则为20；          2、循环类语法                  4).{{each}}语法                         该语法与javascript类似，起到循环的作用，可以对其后的数据进行遍历，然后将遍历的数据进行一系列的操作,另外从each中取得数据时经常与${}混合使用。同时，该语法也是需要进行闭合的。举个例子:                                 {{each(key,value),arr}}                                        
  • ${value}
    •                                 {{/each}}                                 该段语法的作用为将arr进行遍历，并将其中每个属性的value放入到li中，同样，each语法也是需要闭合的。          3、使用类语法                 $(selectpr).tmpl(data)                 $(selector)为选择到的html模板，tmpl()之中的data就是所要传入html模板的数据；举个例子：                                                         {{if data}}                                        
                                                      {{each(index,value) data}}                                                        
    • ${index}
      •                                                 {{/each}}                                        
                                    {{/if}}                                 {rows.data}                                                 将上部文件作为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

    版权声明

    本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！

    推荐阅读