H5 Handlebars的简单使用

匿名 (未验证) 提交于 2019-12-03 00:17:01

H5中都是Html,在这里我们没有el标签。所以我们只能借助模板。好处上面已经介绍了

扫码关注公众号,不定期更新干活

web 开发中,js 解析JSON 是经常的事情。非常繁琐。handlebars 使用了模版,只要你定义一个模版,提供一个json对象,handlebars 就能吧json对象放到你定的模版中,非常方便好用!

  • H5中都是Html,在这里我们没有el标签。所以我们只能借助模板。好处上面已经介绍了。
  • 第一步:在html中定义模板,将后台的json放在模板里。
<script id="task-table-template" type="text/x-handlebars-template">         {{#each this}}//遍历循环的格式,相当于foreach             <a href="{{link}}">//json中的link必须是{{}}格式                 <strong>                     {{Obj_title}}//同上                 </strong>             </a>         {{/each}}     </script>
  • 第二步:在js中实例化这个模板
var myTemplate = Handlebars.compile($("#task-table-template").html());
  • 第三步:将后台json传进来显示,并确定模板显示位置,下面的列子 将模板显示在class=notice_srcoll的div上
$('.notice_srcoll').html(myTemplate(data.noticeTasklist));
  • 这里提到的json就是我们熟悉的json,给一个列子看看
 var data = { users: [             {username: "alan", firstName: "Alan", lastName: "Johnson", email: "alan@test.com" },             {username: "allison", firstName: "Allison", lastName: "House", email: "allison@test.com" },             {username: "ryan", firstName: "Ryan", lastName: "Carson", email: "ryan@test.com" }           ]};
  • handlebar中if else只支持原生态的,也就是只支持true 和 false 的判断,但是事实上我们的逻辑中很多情况下的判断并不是仅仅就true和false,这个时候我们这么办呢。先看看原生态的if else
{{#if score}}              <li>                  <font>                      <input type="checkbox" name="you" id="{{id}}" class="regular-checkbox big-checkbox" value="{{id}}" checked disabled/>                      <label for="{{id}}"></label>                  </font>                  <div class="li_div">                      <strong>                          {{name}}                      </strong>                      <p>主讲老师                          {{teacher}}                      </p>                  </div>              </li>              {{else}}              <li>                  <font><input type="checkbox" name="you" id="{{id}}1" class="regular-checkbox big-checkbox" value="{{id}}"  />                      <label for="{{id}}1"> </label>                  </font>                  <div class='li_div'>                      <strong>                          "{{name}}"                      </strong>                      <p>主讲老师                          {{teacher}}                      </p>                  </div>              </li>              {{/if}}
  • 这里的判断就是说score未undefined null false [] 返回的都是false,在这里并不能判断分数大小。这个时候我们通过Handlebars.registerHelper用来定义Helper来对handlebars就醒扩展。

  • html代码

{{#compare age 20}}              <tr>                <td>{{name}}</td>                <td>{{sex}}</td>                <td>{{age}}</td>              </tr> {{else}}              <tr>                <td>?</td>                <td>?</td>                <td>?</td>              </tr> {{/compare}}
  • js对handlebars扩展
//注册一个比较大小的Helper,判断v1是否大于v2          Handlebars.registerHelper("compare",function(v1,v2,options){            if(v1>v2){              //满足添加继续执行              return options.fn(this);            }else{              //不满足条件执行{{else}}部分              return options.inverse(this);            }          });
  • 这里需要说明一下,在利用Handlebars.registerHelper注册事件时,如果后面的function中没有传options的话我们就可以直接调用,如果有options的话,我们需要在前面加上#,因为加上options的话是块级别的Helper。

  • 事列一
 Handlebars.registerHelper("addOne",function(index,options){                 return parseInt(index)+1;             });
  • 调用
<label for="checkbox-2-{{addOne @index}}"></label>
  • 事列二
Handlebars.registerHelper("compare",function(v1,v2,options){            if(v1>v2){              //满足添加继续执行              return options.fn(this);            }else{              //不满足条件执行{{else}}部分              return options.inverse(this);            }          });
  • 调用
{{#compare age 20}}
  • 原声if还支持多级判断
{{#if name.xxx}},这样写就假设name属性是一个map,检测name属性中是否包含xxx属性。
  • 这里参考网上一篇博客的案列
{{#sort ages id="ages-list" class="con" }}         <span>{{@name}}:{{this}}</span>   {{/sort}}
  • 经过编译后上面这段信息被分装在options里了。下面是注册代码
//上面的信息在下面的options里 Handlebars.registerHelper("sort",function(context,options){               var i = 0,str="<div id="+ options.hash.id +" class="+ options.hash.class +">";                for(;i<context.length;i++){                  str+=options.fn(context[i],{data:{name:options.data[i]}});               }               str+="</div>";               return str;           }); 
  • helper中的options包含了那些信息?
- data:可以在渲染模板时,将其传进去,如template(context, {data: data}) 。(//这里后面会涉及) - hash : 保存写模板时,可以将一些值以key-value对的形式传进去,比如上面的div里有ID  和 classs属性,这两个都是键值对,都会存在options.hash中,这里我们可以看成是map - fn : 方法,官方解释说“options.fn的可以被认为是被编译过的普通handlebars模板,它的调用的执行环境被认为是‘this’,所以你可以把this作为执行上下文去调用它”,这里存放了上面那个div中的闭环体。什么是闭环体?所谓闭环体就是有开有闭,上面div里那个span就是闭环体,<zzz></zzz>形如这样的就是闭环体。 - inverse : 给if的block的else来用的.说白了就是给{{else}}使用的。
  • 数据源及模板渲染
var template = Handlebars.compile($("#people-template").html());   var temp = {ages:[23,24,56,64]}   var result = template(temp,{data:["tom","jak","lili","jim"]});      /*result:   <div id="ages-list" class="con">   <span>jak:24</span>     <span>lili:56</span>     <span>jim:64</span>    </div>
  • 模板渲染中用到var result = template(temp,{data:["tom","jak","lili","jim"]});就是在渲染时传入data数据.正常情况下传递一个json数据,当传两个json了,第二个json里的数据就是替换模板中的占位符的({{@...}}这种写法的占位符).

  • str+=options.fn(context[i],{data:{name:options.data[i]}});这句话就是将模板渲染时传入的数据中的name字段付给{{@name}}这个占位符。context[i]就是传给文中{{this}}也就是相当于{{ages}}的。在渲染时一定要匹配,比如我的数据源是ages那就一定要用ages,那为什么我上面用的是{{this}},因为我在div中的ages,所以div下面的上下文this指代的就是ages.

  • 模板
{{#each comments}}     <div class="comment">       <h2>{{subject}}</h2>       {{{body}}}     </div>   {{/each}}
  • 在上面的模板中看出,我们遍历出的是div,div本身就是闭环体,都在我们的options.fn中,所以我们的helper就直接遍历就行了。
Handlebars.registerHelper('each', function(context, options) {   var ret = "";    for(var i=0, j=context.length; i<j; i++) {     ret = ret + options.fn(context[i]);   }    return ret; });
  • 根据这个我们完全可以写出更加高级的遍历

  • 模板

{{#list nav}}   <a href="{{url}}">{{title}}</a> {{/list}}
  • helper 不难看出a 是闭环体,也就是我们传入值,options.fn中就自动有<a></a>,我们需要做的是加上<ul></ul>,并在每一项上加上<li></li>闭环体。这样就显的更加有规格了。这也是官网上提供的。
Handlebars.registerHelper('list', function(context, options) {   var ret = "<ul>";    for(var i=0, j=context.length; i<j; i++) {     ret = ret + "<li>" + options.fn(context[i]) + "</li>";   }    return ret + "</ul>"; });
  • 模板中的空白可以忽略,mustache声明的两边都可以,只需添加一个 ~ 字符即可。写了这个之后,这一边的所有空白都会被移除,直到最近的Handlebars表达式或这一边的非空白字符
{{#each nav ~}}   <a href="{{url}}">     {{~#if test}}       {{~title}}     {{~^~}}       Empty     {{~/if~}}   </a> {{~/each}}
{   nav: [     {url: 'foo', test: true, title: 'bar'},     {url: 'bar'}   ] }
  • 得出的结果没有换行,也没有格式化用的空白符:
<a href="foo">bar</a><a href="bar">Empty</a>

部分资料参考!!!

扫码关注公众号,不定期更新干活

加入战队

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!