jQuery tmpl 讲解

2016-07-01 14:30
陈铭竑
1、什么是jQuery-tmpl
（1）jQuery的一个类库
（2）一个轻量级的前端模板引擎（vue.js也是一种前端模板引擎）
（3）可以在模板中实现逻辑运算
2、jQuery-tmpl的语法
（1）占位：${变量}或{{= 变量}}
注：=和变量之间一定要有空格
（2）循环
{{each(i,obj) objs}}...{{/each}}
（3）选择
{{if 条件}}...
{{else 条件}}...
{{else}}...
{{/if}}
3、为什么选择jQuery-tmpl

• 兼容性好，兼容各种主流浏览器
• 容易学，上手快
• 代码清晰，有智能提示
• 渲染工作放在前端，减少服务端开销
• 文档齐全，找资料方便

Demo

扩展

PS:其实jQuery-tmpl也给我们提供了一个思路，有些时候可以自己写模板，然后去使用，不一定要引用插件。
例如：

var temp = $("#PsgerTemp").html();
var html=temp.replace("{nationality}",nationalityHtml).replace("{ptype}", 1).replace("{type}", "成人").replace("{isShowMobile}","").replace(/\{i\}/g, i);

通常来说，都会有很多个人，如果使用模板的话，只要写一遍html代码，剩余的就是遍历人数，拼接html即可。