新航路师徒学院

 找回密码
 立即注册
搜索
查看: 516|回复: 3

【新航路】js模板引擎handlebars简单使用

[复制链接]

16

主题

23

帖子

93

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
93
发表于 2016-9-1 15:12:11 | 显示全部楼层 |阅读模式
HTML代码
  1. <script id="J_template" type="text/x-handlebars-template">
  2.           <h1>{{testName}} </h1>
  3.           <div>{{test2Name}}</div>
  4.      </script>
复制代码
JavaScript代码
  1. 1、// 获取所需 script 的模板id的 innerHTML
  2.      var source= document.getElementById('J_template').innerHTML;
  3.      2、// 编译获取的内容的字符串
  4.      var testTemplate = Handlebars.compile(source);
  5.      3、//数据内容  json
  6.      var data = {
  7.           testName: test1,
  8.           test2Name:test2
  9.      }
  10.      4、把数据传给html   下行中 divf需要获取
  11.      var div = documet.getElementById('div_content');
  12.      div.innerHTML =  template(data);
复制代码
jQuery 写法
  1. jquery 写法
  2.      var tpl = Handlebars.compile($('#T_ResumePage').html());
  3.      data = {
  4.      }
  5.      var html = tpl(data);
复制代码



回复

使用道具 举报

16

主题

23

帖子

93

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
93
 楼主| 发表于 2016-9-1 15:18:42 | 显示全部楼层
  1. // with 用法  一个json 中 下一级块时 要用 with  也可以不使用 直接  使用 键值
  2. <div class="entry">
  3.      <h1>{{title}}</h1>
  4.      {{#with author}}
  5.      <h2>By {{firstName}} {{lastName}}</h2>
  6.      {{/with}}
  7. </div>
  8. {
  9.   title: "My first post!",
  10.   author: {
  11.     firstName: "Charles",
  12.     lastName: "Jolley"
  13.   }
  14. }
  15. <div class="entry">
  16.   <h1>My first post!</h1>

  17.   <h2>By Charles Jolley</h2>
  18. </div>
复制代码
回复 支持 反对

使用道具 举报

16

主题

23

帖子

93

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
93
 楼主| 发表于 2016-9-1 15:19:07 | 显示全部楼层
直接循环
  1. {{#certList}}
  2.                             <li class="cfix">
  3.                                 <label><i>*</i>证件信息:</label>
  4.                                 <div class="label-control {{_identity certType}}">
  5.                                         <p class="f-other f-other1">
  6.                                 <span>{{_paperTypes certType}}</span>
  7.                         </p>
  8.                         <p class="f-other">
  9.                                 <span>证件号:</span>
  10.                         </p>
  11.                         <p class="f-other f-other2">
  12.                                 <span>{{certNumber}}</span>
  13.                         </p>
  14.                         <p class="f-other f-hide">
  15.                                 <span>有效期至:</span>
  16.                         </p>
  17.                         <p class="f-other f-hide">
  18.                                 <span>{{validityDateStr}}</span>
  19.                         </p>
  20.                         <p class="f-other f-hide">
  21.                         <span>签发地:</span>
  22.                     </p>
  23.                         <p class="f-other f-hide">
  24.                                 <span>{{visaPlace}}</span>
  25.                         </p>
  26.                                 </div>
  27.                         </li>
  28.                     {{/certList}}
复制代码
回复 支持 反对

使用道具 举报

16

主题

23

帖子

93

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
93
 楼主| 发表于 2016-9-1 15:21:16 | 显示全部楼层

【新航路】js模板引擎handlebars简单使用

if else
  1. {{#_if passengerInfo}}
  2.                         {{#passengerInfo}}
  3.                         <tr data-id="{{id}}">
  4.                                 <td width="47">&nbsp;</td>
  5.                                 <td width="35"><input class="item" type="checkbox" /></td>
  6.                                 <td width="61">{{addOne @index}}</td>
  7.                                 <td width="127">{{contactName}}</td>
  8.                                 <td width="70">{{certTypeName}}</td>
  9.                                 <td width="193">{{certNumber}}</td>
  10.                                 <td width="111">{{contactMobile}}</td>
  11.                                 <td width="103">{{contactNation}}</td>
  12.                                 <td width="33">{{_gender contactGender}}</td>
  13.                                 <td class="operate"><a class="is-see" href="show.html?id={{id}}">查看</a><a class="is-edit" href="edit.html?id={{id}}">编辑</a><a class="is-del" href="javascript:;">删除</a></td>
  14.                         </tr>
  15.                         {{/passengerInfo}}
  16.                 {{else}}
  17.                         <tr class="emptytr">
  18.                                 <td colspan="10" class="empty-list">
  19.                                         <i></i>
  20.                                         <b>无常用乘客信息,您可以选择<a href="edit">新增乘客</a></b>
  21.                                 </td>
  22.                         </tr>
  23.                 {{/_if}}
复制代码

Handlebars.registerHelper 使用
  1. Handlebars.registerHelper("_if",function(v,options){
  2.                                 if(v || v != null ){
  3.                             return options.fn(this);
  4.                         }else {
  5.                             return options.inverse(this);
  6.                         }
  7.                         });
复制代码

  1. Handlebars.registerHelper("addOne",function(index){
  2.                                 return index+1;
  3.                         });
  4.                         // 性别
  5.                         Handlebars.registerHelper("_gender",function(v1,v2){
  6.                                 return genderType[v1];
  7.                         });
复制代码
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

新航路师徒学院 ( 京ICP备16035622号

GMT+8, 2018-9-25 23:23 , Processed in 0.125954 second(s), 23 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表