handlebars使用总结

时间：2022-07-09 15:26:40

对自己使用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 }}

相关文章