jquery.tmplate使用心得
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使用心得的更多相关文章
- jquery validate学习心得
据说,javascript最初的由来就是为了解决表单的验证问题,当然现在的js已经能够用来做各种各样炫酷的效果,不过表单验证一直以来都是js很重要的一个用途(在博客园第一篇博客,不知道说些什么开头~~ ...
- 关于jQuery UI 使用心得及技巧
1 jQuery UI 有时你仅仅是为了实现一个渐变的动画效果而不得不把javascrip 重新学习一遍然后书写大量代码.直到jQuery的出现,让开发人员从一大堆繁琐的js代码中解脱,取而代之几行j ...
- jQuery deferred 使用心得
因为项目的原因,我接触到了jQuery deferred 的这个神奇的工具,下面我用几个例子,与大家分享我的感悟. 我们有5个很耗时的函数 分别为fA.fB.fC.fD.fE 我们的需求是fA和fB ...
- 【菜鸟学习jquery源码】数据缓存与data()
前言 最近比较烦,深圳的工作还没着落,论文不想弄,烦.....今天看了下jquery的数据缓存的代码,参考着Aaron的源码分析,自己有点理解了,和大家分享下.以后也打算把自己的jquery的学习心得 ...
- 怎么书写高质量jQuery代码
众所周知,jQuery现在已经非常流行,百度新首页中也已经开始使用jQuery,今天总结下怎么书写更好的jQuery代码使jQuery代码更好.更快的执行,希望本篇jQuery教程一改大家以前不合理的 ...
- phongap+ jquery + asp.net +android,我把我遇到的问题和处理方法的连接总结一下
这些都是最基本的问题,在实际的运用中都会用到 第1章.搭建Android的开发环境-跟我学编程 Win7旗舰版中的IIS配置asp.net的运行环境 - 追夢 - 博客园 vs2012下asp.net ...
- FullPage.js – 轻松实现全屏滚动(单页网站)效果
FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和 ...
- jQuery修炼心得-DOM节点的插入
1. 内部插入append()与appendTo() append:这个操作与对指定的元素执行原生的appendChild方法,将它们添加到文档中的情况类似. appendTo:实际上,使用这个方法是 ...
- JQuery纵向下拉菜单实现心得
jquery库给我们带来了许多便利,不愧是轻量级的DOM框架,在前面的博文中小编分别对jquery的基础知识以及jquery的一些小demo有一系列的简单介绍,期待各位小伙伴的指导.使用jquery实 ...
随机推荐
- mongodb中limit与skip方法
Mongodb Limit()方法 如果需要在mongodb中获取指定数量的数据记录,这时候就要用到limit()方法,该方法需要接收一个数字参数 基本语法: DB.COLLECTION_NAME. ...
- 【http】post和get请求的区别
两种常用的HTTP请求方式:post和get get:从指定的资源进行请求.数据长度有限制(2048个字符)可被缓存.可被保留在浏览器历史记录中,安全性较差.发送敏感信息如密码时不适用. po ...
- 【整理】01. jQuery.Form.js 用法分析
前言: 为什么使用JQuery.From.js,因为原生<form>表单没有回调函数,不过可以通过jquery-form.js这个插件来实现回调函数. jQuery.form.js是一个f ...
- Python操作文件和目录
Python操作文件和目录 读写文件比较简单,有一点特别注意就好了 windows下Python默认打开的文件以gbk解码,而一般我们的文件是utf-8编码的,所以如果文本含有中文,就会出现异常或者乱 ...
- Java微信公众平台开发之扫码支付模式二
官方文档点击查看 准备工作:已通过微信认证的公众号,域名可以不通过ICP备案借鉴了很多大神的文章,在此先谢过了大体过程:根据固定金额和商品的ID先生成订单,再生成二维码,客户扫一扫付款模式二支付的流程 ...
- 准备 macvlan 环境 - 每天5分钟玩转 Docker 容器技术(54)
除了 overlay,docker 还开发了另一个支持跨主机容器网络的 driver:macvlan. macvlan 本身是 linxu kernel 模块,其功能是允许在同一个物理网卡上配置多个 ...
- 【机器学习笔记之六】Bagging 简述
本文结构: 基本流程 有放回抽样的好处 Bagging 特点 sklearn 中 Bagging 使用 Bagging 和 Boosting 的区别 bagging:bootstrap aggrega ...
- alter system [switch logfile]与[archive log current]的区别
--alter system [switch logfile]与[archive log current]的区别 ------------------------------------------- ...
- lsof命令详解
--转载 一般root用户才能执行lsof命令,普通用户可以看见/usr/sbin/lsof命令,但是普通用户执行会显示“permission denied” 我总结一下lsof指令的用法: lsof ...
- JavaScript获取和创建元素
1.JavaScript中获取元素 常用的获取document中元素的方法: 1) document.getElementById() =>通过元素ID获取文档中特定的元素,如获取 id = ...