码迷,mamicode.com
首页 > Web开发 > 详细

js 模版引擎handlebars学习(一)

时间:2018-02-24 20:47:59      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:文档   sub   学习   smart   obb   xxxx   运算   each   基本   

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学习(一)

标签:文档   sub   学习   smart   obb   xxxx   运算   each   基本   

原文地址:https://www.cnblogs.com/jingyingggong/p/8467483.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!