jquery.tmplate使用心得

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

posted on 2017-09-08 16:23 pandaClose 阅读(...) 评论(...) 编辑 收藏

转载于:https://www.cnblogs.com/pandaClose/p/7495233.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/487620.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机器学习虽好,也要看什么场合!

来源&#xff1a;AI科技评论编译 | 王念编辑 | 丛末身为AI时代的程序猿&#xff0c;我们天生就对数据集敏感。因此&#xff0c;当我们拿到一批真实数据时&#xff0c;激动之情肯定溢于言表&#xff01;举例来说&#xff0c;我们可能拿到了一组患者正确药量的数据集&#xff0c;…

CVTE前端笔试编程题

这些题目是做完笔试之后&#xff0c;在别的地方找到的&#xff0c;现在附上。 1.(1)这题考察的怎么把参数转换为数组&#xff0c;然后再截取你想要的位数。 function C(){var a_argsArray.prototype.slice.call(argumens,0,2);var b_argsArray.prototype.slice.call(arguments,…

springboot 引入jdbc驱动_SpringBoot+MyBatis+Druid整合demo

最近自己写了一个SpringBootMybatis&#xff08;generator&#xff09;druid的demo1. mybatisgenerator逆向工程生成代码1. pom文件pom文件添加如下内容&#xff0c;引入generator插件<!-- mybatis代码生成插件 --><!--如果使用的mysql驱动是6.x的&#xff0c;那就无法…

盘点|世界流行的十大机械工程设计软件,你会用几种?

来源&#xff1a;自机械前线机械设计是机械生产的第一步&#xff0c;是决定机械性能的最主要的因素。为了满足机械产品性能的高要求&#xff0c;在机械设计中大量采用计算机技术进行辅助设计和系统分析&#xff0c;以下是目前世界上流行的十款式机械工程设计软件。1、Autodesk …

【Java】JavaIO(一)、基础知识

一、常用概念介绍 Java的IO&#xff0c;实现输入输出的基础&#xff0c;可以方便的实现数据的输入输出 二、流的分类 1. 按照流向来分&#xff1a; a). 输入流&#xff1a;向应用程序输 b). 输出流&#xff1a;从应用程序中输出 输入输出流是站在程序的角度来说的&#xff0c;只…

SpaceX再发射58颗星链卫星 总数达到538颗

来源&#xff1a;网易智能据外媒报道&#xff0c;在距离上次星链&#xff08;Starlink&#xff09;卫星发射仅仅10天后&#xff0c;美国太空探索技术公司SpaceX于当地时间周六再次发射了最新一批星链卫星。与以往每批发射60颗星链卫星不同的是&#xff0c;SpaceX此次只发射了58…

MVC系列——MVC源码学习:打造自己的MVC框架(一:核心原理)(转)

阅读目录 一、MVC原理解析 1、MVC原理二、HttpHandler 1、HttpHandler、IHttpHandler、MvcHandler的说明2、IHttpHandler解析3、MvcHandler解析三、HttpModule 1、HttpModule能干什么2、HttpModule的使用3、HttpModule和HttpHandler如何区分4、UrlRoutingModule解析 四、总结正…

python中的画布背景设置_教你用python画图—Turtle详细教程

Turtle模块绝对是吸引非专业代码开发者人员学习python入门的好工具通过turtle几行代码的执行软件就会画出漂亮的图形&#xff0c;美观而且有成就感&#xff0c;这样一下子对python编程就产生了兴趣。这些漂亮的图形如三角形、五角星、机器猫等。在写代码的时候改变几个参数&…

城市大脑,是工程问题,但首先是基础科学问题

2020年&#xff0c;在5G&#xff0c;大数据&#xff0c;人工智能、区块链、新基建等一轮轮科技浪潮下&#xff0c;城市大脑开始逐步成为新的城市建设和前沿科技热点。到2020年6月已经有近500多个城市宣布建设“城市大脑”&#xff0c;包括阿里&#xff0c;华为&#xff0c;百度…

JOptionPane弹框常用实例

最近在做swing程序中遇到使用消息提示框的&#xff0c;JOptionPane类其中封装了很多的方法。 很方便的&#xff0c;于是就简单的整理了一下。 1.1 showMessageDialog 显示一个带有OK 按钮的模态对话框。 下面是几个使用showMessageDialog 的例子&#xff1a; Java代码 JOption…

测试流程图_挑战美国Postman VS 龙测搭积木接口测试,谁与争锋

大家做接口测试是不是还在用Postman, SoapUI&#xff0c;JMeter以及公司内部开发的接口测试平台呢&#xff1f;那是不是觉得比较烦呢&#xff1f;比如每次运行下一个接口总是要运行一下登录接口来复制其生成的登录Token&#xff1f;再比如&#xff0c;手工测试人员不会写专业的…

从5G到6G的思考:需求、挑战、技术趋势

来源&#xff1a;5G作者&#xff1a;易芝玲&#xff1a;中国移动首席科学家。王森&#xff0c;韩双锋&#xff0c;崔春风&#xff1a;中国移动通信研究院。王亚峰&#xff1a;北京邮电大学信息与通信工程学院。未来智能实验室的主要工作包括&#xff1a;建立AI智能系统智商评测…

VS2017C++单元测试

0、欢迎食用 希望对点进来的你有所帮助。全文记流水账&#xff0c;内心想法如示例项目名称。1、建立需测试的项目 新建项目正常书写.h 和.cpp文件2、新建单元测试 右击解决方案 -> 添加 -> 新建项目 Visual C -> 测试 -> 本机单元测试项目点击确定出现3、添加被测项…

ncf 推荐系统_浅析神经协同过滤NCF在推荐系统的应用

NCF在推荐领域应用背景CF&#xff0c;也就是协同过滤&#xff0c;在推荐领域有极其广泛的应用&#xff0c;应该没有谁的智能推荐系统是没用到过CF的。CF其实就是挖掘user和item的交互关系&#xff0c;然后生成I2I或者U2I表示向量。传统的CF从数学角度上还是偏行为统计计算的&am…

2020身高体重标准表儿童_2020年儿童标准体重表出炉!过胖影响发育!(附身高体重标准表)...

近年来&#xff0c;孩子们长胖的趋势越来越明显&#xff0c;一些疾病也有年轻化的趋势。很多家长们平时也很注意饮食搭配和运动&#xff0c;但孩子还是一不小心就“超重”了&#xff0c;真的防不胜防。相信和我一样担忧孩子家长肯定不少。今天就来和大家讲讲&#xff0c;关于孩…

游戏的未来是什么?

“我们还没有真正跨过VR 1.0&#xff0c;无绳VR要么不可靠要么非常贵。我们正在朝VR 2.0发展&#xff0c;用的是眼球追踪&#xff0c;有更大的视野、更高的分辨率、更好的音频和六个自由度&#xff0c;但这些领域仍需要进一步研究。”来源丨Forbes作者丨Matt Gardner编译丨科技…

AI仿生:人类进化新可能

来源&#xff1a; 脑极体看过《银翼杀手》这部开创赛博朋克风格科幻电影的人&#xff0c;一定会对电影中仿生人罗伊贝蒂印象深刻&#xff0c;尤其是电影结尾时反派男主在滂沱大雨中的临终独白&#xff1a;我目睹过你们绝对不会相信的东西&#xff1a;战舰在猎户星座的边缘燃烧&…

python 获取 字典中的指定键_python中字典方法的详细教程

上篇文章讲到了python字典的基础知识&#xff0c;今天继续python中哈希(字典的应用)方法的应用。前章回顾&#xff1a;python字典的应用及案例分析字典方法&#xff1a;dict.clear() 删出字典内所有的元素。dict.copy() 返回字典的一个浅复制。dict.fromkeys(seq[,val]):创建一…

事务基本信息

一、事务的定义 事务&#xff08;Transaction&#xff09;是由一系列对系统数据进行访问与更新的操作所组成的一个程序执行逻辑单元&#xff08;Unit&#xff09;&#xff0c;侠义上的事务特质数据库事务。1&#xff09;当多个应用程序并发访问数据库时&#xff0c;事务可以在这…

android 人脸识别_小模型,高精度!小视科技推出极致轻量型人脸识别SDK

AI 落地为王时代的到来&#xff0c;使得人脸识别的精度和速度备受人们关注。近年来&#xff0c;随着模型压缩、量化技术的进步&#xff0c;模型运行速度也越来越快。对于一些特定的人脸检测任务&#xff0c;轻量型的人脸识别SDK即可满足需求。▲图源网络轻量级架构的显著特征便…