handlebars java,handlebars踩坑之旅

1. each的使用方法(遍历数组或者对象)

{{include "tpl/components/page3-school-slide/each-slide"

data='[

{

"name": "badao",

"word": "刀"

}, {

"name": "changge",

"word": "歌"

}, {

"name": "cangyun",

"word": "云"

}

]'

}}

{{#each data}}

{{include "tpl/components/page3-school-slide/index"

name=this.name

word=this.word

}}

{{/each}}

{{#each data}}

data-index={{@index}} //数组遍历时索引值为 {{@index}}, 对象为{{@key}}

data-img="assets/images/page_exterior/tab/{{this.name}}.jpg" data-name="{{this.name}}">

{{/each}}

2. 判断是否有传参, 有的话使用传参的值, 没有的话使用默认值

{{#unless ns}}

{{var ns = 'xxx'}}

{{/unless}}

3. if else 判断

{{#if list}}

{{#each list}}

{{this.name}}

{{/each}}

{{else}}

{{error}}

{{/if}}

//对应适用json数据

var data = {

info:['HTML5','CSS3',"WebGL"],

"error":"数据取出错误"

}

这里{{#if}}判断是否存在list数组，如果存在则遍历list，如果不存在输出错误信息

4. each 判断是否是第一个或者是最后一个

{{#each list}}

```

{{#if @first}} //{{#if @last}}

```

{{else}}

```

{{/if}}

```

{{/each}}

{{#each list}}

{{#if @first}}

{{this.method-type-text}}

{{else}}

{{this.method-type-text}}

{{/if}}

{{this.method-type-introduce}}

{{/each}}

遍历时给指定的某个值进行特殊处理(使用比较方法)

{{#compare name "==" "changge"}}

do something

{{else}}

do something else

{{/compare}}

{{#each data}}

{{#compare this.num "==" 1}}

{{else}}

{{/compare}}

{{/each}}

content block 内容嵌套

// 外层

{{var ns = "layout-wrapper"}}

{{#extend "tpl/layouts/base-layout" }}

{{#block "body"}}

{{/block}}

{{/extend}}

// 内层:

{{#extend "tpl/layouts/index" title="标题"}}

{{#content "body"}}

{{var ns = "index"}}

{{include "tpl/components/swiper/index"}}

插入的页面内容

{{/content}}

{{/extend}}