js 模版引擎handlebars学习

Posted 2020-10-25 jingyingggong

1. handlebars 是一个前端的js模版引擎，和其他的模版引擎一样有自己的语法例如php的模版

{$foo}        <-- 显示简单的变量 (非数组/对象) php的smarty模版引擎

div(class=‘div-class‘, (click)=‘play()‘) //pug的模版引擎

{{bianliangming}} //handlebars的模版引擎

2. 基本表达式

 1 //数据如下：
 2 {
 3     title: "xxxxx",
 4     person: {
 5         name: "Jack",
 6         age: 30,
 7         hobbies: [ "football", "basketball", "xbox"]
 8     }
 9 }
10 <div>
11     <h1>{{title}}</h1>
12     <div>{{person.name}}</div>//支持.运算符表示对象属性
13     <div>{{person/age}}</div> //同样支持/运算符表示对象属性，只是此写法已经不推荐了，对于官方文档不推荐的写法，一定要切记不再使用。
14     <ul>
15         {{#each person.hobbies as |hobby|}}
16             <li>{{hobby}}</li>
17         {{/each}}
18     </ul>
19 </div>

3. 特殊字符禁用做标识

Whitespace //空格，tab，回车换行

! " # % & ‘ ( ) * + , . / ; < = > @ [ \ ] ^ ` { | } ~ 

引用非法标识的时候可以使用 [ 引用属性，如下：

1 {{#each articles.[10].[#comments]}}
2   <h1>{{subject}}</h1>
3   <div>
4     {{body}}
5   </div>
6 {{/each}}

以上循环的是如下变量

1 articles[10][‘#comments‘]

4. 转义和禁止转义

{
  h1: "<h1>good</h1>"
}

<div>
    <p>转义的方式展示</p>
    {{h1}}
</div>

<div>
    <p>禁止转义，是什么就原样输出</p>
    {{{h1}}}
</div>

输出如下：

{
  h1: "<h1>good</h1>"
}

<div>
    <p>转义的方式展示</p>
    %3Ch1%3Egood%3C/h1%3E
</div>

<div>
    <p>禁止转义，是什么就原样输出</p>
    <h1>good</h1>
</div>

先写这些吧，下一章应该会学一些帮助器和子表达式。