handlebars使用总结

对自己使用handlebars做一个小总结，以后忘记了，好有地方看一下，不会用的小伙伴也可以借鉴一下，写的不好。

使用

Handlebars的安装是比较简单和方便的;handlebars是一个纯JS库，因此你可以像使用其他JS脚本一样用script标签来包含handlebars.js

<script src="jquery.min.js"></script>
<script type="text/javascript" src=".js/handlebars.js"></script>  

基本

html：

<-- 模板 -->
<script type="text/x-handlebars-template" id="tpl">
　　{{#each}}
　　　　...
　　{{/each}}
</script>

js:

//获取到模板
var tpl = $("#tpl").html();
//预编译模板
var template = Handlebars.compile(tpl);
//模拟数据（也可以是获取的json数据）
var context = {};
//匹配数据
var html = template(context);
//输入模板
$('body').html(html);

　注 ： 这是handlebars最常用的一中创建使用模式。

下面写一点handlebars的一些常用的方法，几乎是只要你用到handlebars就会用到的方法；我是100%用到了；

注：下面这些都是在模板中的使用的只有，目前只有helper是在js中定义在模板中使用。

概念和常用方法

1.block

我看每个介绍handlebars的都介绍了这个最基本最基本的东西，我也说不好，只能简单说一下了。

这个就是将模板分成块以#开头以/结束

{{#...}}{{/...}}
//例如 ：
  {{#each}}{{/each}}
  {{#if}}{{else}}{{/if}}

2.表达式

这也是一个非常简单的一个概念，越简单的越难说，但是好理解希望你们能理解，原谅文化水平不高的我

我们想要展示数据就要用到表达式，在handlebars中的表达式就是两层大括号，括号里写上json数据中的键展现在页面上的就是对应的值 {{...}}

如果我们不想转化handlebars的数据，就是直接展示json的键我们就需要三层大括号 {{{}}}

3.判断 if and unless

handlebars中的判断很弱，弱到这能判断true和false（包括布尔值转化的例如 "",undefined,NaN。不支持 == !=  || && !）。handlebars提供了一个自定义helper可以自己加强if，这个后面会说到。

1.if判断（一般我使用这个）

模板：

{{#if true}}
  <div>为true的时候显示<div>
{{else}}
  <div>为false的时候显示<div>
{{/if}}

2.unless判断(与if是相反的)

模板：

{{#unless false}}
  <div>为false的时候显示<div>
{{else}}
  <div>为true的时候显示<div>
{{/unless}}

4.部分 {{#with}}{{/with}}

这种情况是返回的json数据有多个对象嵌套的问题，很好用的一个方法，

也可以直接通过对象点属性的方法找下去，既然handlebars提供了。我就说一下，用不用，看情况

json数据：

{
  title : "标题1",
  author: {
        firstName:"王大",
        lastName:"王二"
    }
}

模板：

<div>
    <h1>{{title}}</h1>
    {{#with author}}
        <p>{{firstName}}</p>
        <p>{{lastName}}</p>
    {{/with}}
</div>

5.遍历 {{#each}}{{/each}}

数据返回我们一个数组是很常见的问题，handlebars有专门处理数组的方法

json数据：

{name:["html","css","javaScript"]}

模板：

<ul>
    {{#each name}}
　　　　 <li>{{@index}} 索引<li>
        <li>{{this}}</li>
    {{/each}}
</ul>

注：this就是name数组中的每一个

6.注释

　　单行：

{{!     注释的内容            }}

　　多行：

{{!-- 注释的代码段--}}

7.自定义 helper

定义要在js文件中定义，使用要在模板中使用

handlebars使用Handlebars.registerHelper()方法来注册helper，

一般分为两类，一类是用来格式化数据，另一类是用来加强if

这个网址说的很详细：http://www.tuicool.com/articles/aiaqMn

时间格式化：

　　　　　　//时间戳处理
            Handlebars.registerHelper('format', function (date,options) {
　　　　　　
                let str = new Date(date).toLocaleString();
                let i = str.indexOf(' ');
                let str1 = str.substr(i + 1,2);
                let str2 = str.substr(i + 3,2);

                if (isNaN(str2)) {
                    if (str1 == '上午') {
                        str = str.replace(str.substr(i + 1,3),'0' + str.substr(i + 3,1));
                    }else {
                        str = str.replace(str.substr(i + 1,3),Number(str.substr(i + 3,1)) + 12);
                    }
                }else{
                    if (str1 == '上午') {
                        str = str.replace(str.substr(i + 1,2),'');
                    }else {
                        if(Number(str2) == 12){
                            str = str.replace(str.substr(i + 1,4),'00');
                        }else {
                            str = str.replace(str.substr(i + 1,4),Number(str.substr(i + 3,2)) + 12);
                        }
                    }
                }
                return str;
            });

if的简单加强：

        //if 处理
            Handlebars.registerHelper('ifCond', function(v1, v2, options) {
                if(v1 == v2) {
　　　　　　　　　　　　
                    return options.fn(this);
                }
　　　　　　　　　　//options.inverse()这个方法就是取反的意思，相当于if的else
                return options.inverse(this);
            });    

返回一个字符串：

Handlebars.registerHelper('valValType', function(){
//this.type 是返回的数据
  var type = Handlebars.escapeExpression(this.type);
  var html = `<div>1234</div>`;

  if(type){

    var newHtml =`<div>12345</div>`;
  }else {
    var newHtml = html;
  }

  return new Handlebars.SafeString(newHtml)
})

//用法在模板里 {{ valValType }}