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使用心得的更多相关文章

  1. jquery validate学习心得

    据说,javascript最初的由来就是为了解决表单的验证问题,当然现在的js已经能够用来做各种各样炫酷的效果,不过表单验证一直以来都是js很重要的一个用途(在博客园第一篇博客,不知道说些什么开头~~ ...

  2. 关于jQuery UI 使用心得及技巧

    1 jQuery UI 有时你仅仅是为了实现一个渐变的动画效果而不得不把javascrip 重新学习一遍然后书写大量代码.直到jQuery的出现,让开发人员从一大堆繁琐的js代码中解脱,取而代之几行j ...

  3. jQuery deferred 使用心得

    因为项目的原因,我接触到了jQuery deferred 的这个神奇的工具,下面我用几个例子,与大家分享我的感悟. 我们有5个很耗时的函数 分别为fA.fB.fC.fD.fE  我们的需求是fA和fB ...

  4. 【菜鸟学习jquery源码】数据缓存与data()

    前言 最近比较烦,深圳的工作还没着落,论文不想弄,烦.....今天看了下jquery的数据缓存的代码,参考着Aaron的源码分析,自己有点理解了,和大家分享下.以后也打算把自己的jquery的学习心得 ...

  5. 怎么书写高质量jQuery代码

    众所周知,jQuery现在已经非常流行,百度新首页中也已经开始使用jQuery,今天总结下怎么书写更好的jQuery代码使jQuery代码更好.更快的执行,希望本篇jQuery教程一改大家以前不合理的 ...

  6. phongap+ jquery + asp.net +android,我把我遇到的问题和处理方法的连接总结一下

    这些都是最基本的问题,在实际的运用中都会用到 第1章.搭建Android的开发环境-跟我学编程 Win7旗舰版中的IIS配置asp.net的运行环境 - 追夢 - 博客园 vs2012下asp.net ...

  7. FullPage.js – 轻松实现全屏滚动(单页网站)效果

    FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和 ...

  8. jQuery修炼心得-DOM节点的插入

    1. 内部插入append()与appendTo() append:这个操作与对指定的元素执行原生的appendChild方法,将它们添加到文档中的情况类似. appendTo:实际上,使用这个方法是 ...

  9. JQuery纵向下拉菜单实现心得

    jquery库给我们带来了许多便利,不愧是轻量级的DOM框架,在前面的博文中小编分别对jquery的基础知识以及jquery的一些小demo有一系列的简单介绍,期待各位小伙伴的指导.使用jquery实 ...

随机推荐

  1. div标签清除float浮动样式方法

    方法一. 这个方法来源于positioniseverything ,通过after伪类实现,完全兼容当前主流浏览器. 1 <style type="text/css"> ...

  2. github 上传下载代码简单使用

    很长时间,一直认为github很难操作,其实认真学了发现也不是很困难. 主要就3个命令 git clone 建立空间 git push 提交代码,git pull拉取代码. git clone htt ...

  3. ABP+AdminLTE+Bootstrap Table权限管理系统第四节--仓储,服务,服务接口及依赖注入

    在ABP框架中,仓储,服务,这块算是最为重要一块之一了.ABP框架提供了创建和组装模块的基础,一个模块能够依赖于另一个模块,一个程序集可看成一个模块, 一个模块可以通过一个类来定义这个模块,而给定义这 ...

  4. 数据结构二叉树的所有基本功能实现。(C++版)

    本人刚学数据结构,对树的基本功能网上找不到C++代码 便自己写了一份,贴出方便大家进行测试和学习. 大部分功能未测试,如有错误或者BUG,请高手们指教一下,谢谢. 结点声明: BinTreeNode. ...

  5. 浅析MySQL中的Index Condition Pushdown (ICP 索引条件下推)和Multi-Range Read(MRR 索引多范围查找)查询优化

    本文出处:http://www.cnblogs.com/wy123/p/7374078.html(保留出处并非什么原创作品权利,本人拙作还远远达不到,仅仅是为了链接到原文,因为后续对可能存在的一些错误 ...

  6. easyui&8Jquery ztree树插件

    7Jquery easyui前台UI框架 开发包: 7.1Layout页面布局 将课后资料中后台系统前台页面素材导入项目中 1.导入Jquery,easyui相关js,css文件 <link r ...

  7. MySQL如何记录binlog

    --MySQL如何记录binlog   -------------------------------2014/07/08     binlog文件的内容 log event       MySQL的 ...

  8. JavaScript获取和创建元素

    1.JavaScript中获取元素 常用的获取document中元素的方法: 1) document.getElementById()  =>通过元素ID获取文档中特定的元素,如获取 id = ...

  9. QtWebKit/QtWebEngine移植差异(网摘)

    QtWebKit/QtWebEngine移植差异 原文出处:[wiki.qt.io] This guide gives an overview of the differences between t ...

  10. Linux粘滞位的设置

    粘滞位(Stickybit),或粘着位,是Unix文件系统权限的一个旗标.最常见的用法在目录上设置粘滞位,如此以来,只有目录内文件的所有者或者root才可以删除或移动该文件.如果不为目录设置粘滞位,任 ...