H5 Handlebars的简单使用

时间 2019-11-16

标签 h5 handlebars 简单使用繁體版

原文原文链接

H5中都是Html，在这里咱们没有el标签。因此咱们只能借助模板。好处上面已经介绍了html

扫码关注公众号，不按期更新干活web

web 开发中，js 解析JSON 是常常的事情。很是繁琐。handlebars 使用了模版，只要你定义一个模版，提供一个json对象，handlebars 就能吧json对象放到你定的模版中，很是方便好用！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中就自动有,咱们须要作的是加上,并在每一项上加上

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>复制代码

部分资料参考！！！微信

扫码关注公众号，不按期更新干活ui

加入战队this

H5 Handlebars的简单使用

加入战队

微信公众号