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>先写这些吧，下一章应该会学一些帮助器和子表达式。
js 模版引擎handlebars学习（一）
原文地址：https://www.cnblogs.com/jingyingggong/p/8467483.html