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实 ...
随机推荐
- Python:使用Kivy将python程序打包为apk文件
1.概述 Kivy是一套Python下的跨平台开源应用开发框架,官网,我们可以用 它来将Python程序打包为安卓的apk安装文件.以下是在windows环境中使用. 安装和配置的过程中会下载很多东西 ...
- 如何模拟click事件,打开一个a标签链接?
在项目开发过程中,我们经常会碰到通过接口返回一个地址,同时在新的tab页面打开一个网址的情况,最直观的想法就是通过window.open(url)的方式,打开一个新的页面,但是大部分浏览器会遭遇拦截. ...
- 花了一年时间开发出来的EZNest 自动套料软件
随着国内钢结构制造业的迅猛发展,市场竞争也愈演愈烈.近来钢材价格的大幅攀升,节约用材已成为企制胜的戈键,提高钢材的利用车自然就成了目前许多企业十分关心的一件事.对十大型钢结构生产制造商来说,如留在传统 ...
- github 或者gitlab 设置添加SSH
克隆项目二种方式: 1. 使用https url克隆, 复制https url 然后到 git clone https-url 2.使用 SSH url 克隆却需要在克隆之前先配置和添加好 SSH ...
- 教学小例子:简易的webSevrer
HttpListener 流利简单的API static void Main() { using (var server = new SimpleWebServer("http://loca ...
- JVM学习笔记五:虚拟机类加载机制
类加载生命周期 类加载生命周期:加载.验证.准备.解析.初始化.使用.卸载 类加载或初始化过程什么时候开始? 遇到new.getstatic.putstatic或invokestatic这4条字节码指 ...
- [vijos NOIP模拟题]天神下凡 贪心+搜索
样例: 考试的时候没时间打了,随便敲了敲就交上去了,没想到竟然编译错误,忘定义n了23333 自己测了测能骗20分hhhh 考虑每个圆对答案的贡献,当一个圆被小圆内切的时候,分成了两半,对答案的贡献就 ...
- layer弹出层传值到父页面
目前做的项目中用到layer弹层传值,弹层输入框输入文本,点击确定按钮,父页面的树结构,会自动添加分组. 在此粘贴下代码,以后遇到,方便回忆,如有疑问请留言,或许会为您解答 $(document).r ...
- linux 两个查找工具 locate,find详解
linux 中有很多查找工具,今天主要讲解locate,find两个工具. 1.locate (1)查询系统上预建的文件索引数据库 /var/lib/mlocate/mlocate.db 注意:如果这 ...
- zabbix 3.2.7 (源码包)安装部署
Zabbix 3.2.7 + CentOS7 安装 环境准备: 操作系统 CentOS Linux release 7.2.1511 (Core) zabbix server 10.30.94.60 ...