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
- 兼容性好，兼容各种主流浏览器
- 容易学，上手快
- 代码清晰，有智能提示
- 渲染工作放在前端，减少服务端开销
- 文档齐全，找资料方便
PS:其实jQuery-tmpl也给我们提供了一个思路，有些时候可以自己写模板，然后去使用，不一定要引用插件。
例如：
<script type="text/text" id="PsgerTemp">
<tr ptype="{ptype}">
<td class="w_30">{type}</td>
<td class="w_150">
<div>中文姓名：</div>
<div><input type="text" class="psg_ctxt" placeholder="如：张三"/>
<i class="help namehelp" helpdiv="hovernamebox" style="display: inline-block;"></i>
<div class="helpboxhover hovernamebox" style="display: none; position: absolute;"><em style="left: 180px;"></em>
<div>1.乘客姓名必须与所持证件一致。<br>2.名字中含生僻字可直接输入拼音代替。例：“王鬳”可输入为“王 yan”或者“王-yan”。<br>3.姓名中不可含有称谓等词语，如：小姐、先生、太太、夫人等。<br>4.中文姓名不可少于2个汉字，英文姓名不可少于2个英文单词。</div>
</div></div>
</td>
<td class="w_210">
<div>英文姓名：</div>
<div><input type="text" class="psg_eftxt" placeholder="姓如:ZHANG"/>
<input type="text" class="psg_estxt" placeholder="名如:SAN"/>
<i class="help namehelp" helpdiv="hovernamebox" style="display: inline-block;"></i>
<div class="helpboxhover hovernamebox" style="display: none; position: absolute;"><em style="left: 180px;"></em>
<div>1.必须用英文字母填写，并确保与所持证件一致。<br>2.请以姓在前名在后的方式填写，如乘客姓名为诸葛亮，则在“姓（拼音或英文）”栏中输入 ZhuGe （注：复姓中无空格或特殊符号）；在“名（拼音或英文）”栏中输入 Liang。如乘客姓名为 Green（姓）/Jim（名） Stephanie（中间名），则在“姓（拼音或英文）”栏中输入 Green；在“名（拼音或英文）”栏中输入 JimStephanie（注：中间名需空一格紧随名之后）。<br>3.英文名字的长度不可超过 26 个字符，如名字过长请使用缩写，乘客的姓氏不能缩写，名可以缩写。姓氏中如包括空格请在输入时删掉空格。<br>4.英文姓名不可少于 2 个英文单词。</div>
</div></div>
</td>
<td class="w_120"><div>证件类型：</div>
<div><select class="certype">
<option value="" nametext=""></option>
<option value="2" nametext="护照">护照</option>
<option value="7" nametext="港澳通行证">港澳通行证</option>
<option value="5" nametext="台胞证">台胞证</option>
</select></div>
</td>
<td class="w_145"><div>证件号码：</div>
<div><input type="text" class="psg_cert" /></div>
</td>
<td class="w_145">
<div class="dp_birth">
<div>证件有效期：</div>
<div><input type="text" class="psg_certenddate" /></div>
<div><span class="birth_tip w_180">证件有效期必须为8位数(如:20160808)</span></div>
</div>
</td>
<td class="w_145">
<div class="dp_birth">
<div>出生日期:</div>
<div><input type="text" class="psg_birth" /></div>
<div><span class="birth_tip w_180">出生日期必须为8位数(如:20160808)</span></div>
</div>
</td>
<td class="w_120"><div>国籍：</div>
<div><select class="nationality">{nationality}</select></div>
</td>
<td class="w_145">
<span class="psg_gender">
<div>性别：</div><div><label><input type="radio" name="group_{i}" value="1" />男</label><label><input type="radio" name="group_{i}" value="0" />女</label></div>
</span>
</td>
</tr>
</script>
var temp = $("#PsgerTemp").html();
var html=temp.replace("{nationality}",nationalityHtml).replace("{ptype}", 1).replace("{type}", "成人").replace("{isShowMobile}","").replace(/\{i\}/g, i);
通常来说，都会有很多个人，如果使用模板的话，只要写一遍html代码，剩余的就是遍历人数，拼接html即可。
