<怎么分辨一部电影的好坏 Mac高频快捷键之前端篇>

Ember之Handlebars模板引擎

#### 前言
　　Ember是一个前端数据持久化框架，与React, Vue, Angular比，只能算是小众框架，不过公司产品有用到，吾等程序员自然义不容辞学习它了。
　　Handlebars是一个JS模板引擎，使用简单，Ember使用它，做了一些扩展。
之前也有用过JSTL、EL表达式、Jade、Freemarker、EJS等，虽用的熟，时间长了，却忘光了，故趁现在有空，记录下来，以备后续查看。
　　在Ember框架下，表达式用在*.hbs里，且只能在html里打印，不能在其script里打印。

###### 变量
```html
{{a}}
```
　　如果变量不存在，不报错，直接忽略打印，即使尝试取undefined的属性。
　　能正确打印的是String,Number,Boolean,打印出来都是String
　　undefined,null打印空
　　Symbol()打印出的还是Symbol()
　　对象打印[object Object]
　　数组调用toString()的方法再打印，内元素按上述转换。但有个例外，如果试图把Symbol()放到数组里，转字符串会报Cannot convert a Symbol value to a string的错，如果只是把Symbol()当成key的对象的对应值则没问题。

###### 判断(true)
```html
{{#if a}}
{{/if}}
or
{{#if a}}
{{else if b}}
{{else}}
{{/if}}
```
　　变量不存在，不报错。
　　会把a尝试转成布尔，null, undefined, '', 0, 空数组，都为false，其他为true，Symbol()也是true。说明其if与js的if有所不同，因为空数组在JS的if判断中是为true。

###### 判断(false)
```html
{{#unless a}}
{{else unless b}}
{{else}}
{{/unless}}
```
　　同if一样，只不过其为false时才执行对应的内容。

###### 三元运算
```html
{{if a 'x' 'y'}}
```
　　类似于三元表达式   a?'x':'y'
　　布尔转换方式同if，如果第三个参数不存在，而第1个参数又是false，打印结果为空。

判断就只有这么多了，如果想判断 a == 1，这是做不到的，所以必须引用一个helper，后面会讲。

###### 数组遍历
设model是一个数组
[{id: 1, name: 'evan'}, {id: 2, name: 'hally'}]
```html
{{#each model as | p index |}}
<p>{{p.id}}, {{p.name}}, index is {{index}}</p>
{{else}}
model not exist!
{{/each}}
```
　　除非model是一个长度大于0的数组，否则都会提示model not exist!
　　其中index与else是非必须的。

###### 对象遍历
设model是一个对象
{id: 1, name: 'evan'}
```html
{{#each-in model as | key value |}}
key is {{key}}, value is {{value}}.
{{else}}
model not exist!
{{/each}}
```
　　相当于for in 遍历，model需为非空对象，否则model not exist!其他同上。

###### 链接
```html
{{#link-to 'detail' 1}} detail 1{{/link-to}}
相当于
<a href="/detail/1">detail 1</a>
```
　　多层路由，使用.分隔，如'detail.index.id'对应 /detail/index/id。
　　前者会事先在router.js检查该路由是否存在，存在无法匹配的路由时整页报错，但如果路由可匹配，比如detail/999,但[西法](http://www.boatsky.com "太空船博客")整个数据库只有900条相关数据，打开后才能发现报错了。
　　Ember可以在相应Component里定义action，如果有一些比如点击的action绑在后者父或祖容器上时，会造成action直接触发事件，无法向下事件捕获，造成普通的a链接不可用，渲染后，对比两者，前者a标签上多个ember加的id与class，Ember用这些在内部做了处理，使得前者可以转换。
　　推荐使用前者。
  
######  helper
鉴于模板引擎不够强大，Ember使用了helper来扩展，目录app/helpers
比如想判断元素是否在数组中，
contain-helper.js
```javascript
import Ember from 'ember';

export function containHelper(params) {
  let arr = params[0];
  if (!arr) {
    return false;
  }
  let str = params[1];
  return arr.includes(str) ? true : false;
}

export default Ember.Helper.helper(containHelper);
```
```html
{{#if (contain-helper model 2)}}
yes, contains
{{/if}}
```

###### actions
js触发事件，我们一般用事件的绑定的方法
而ember则用actions,比如，我们实现一个class隐藏
```javascript
import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    search_hide() {
      this.set('isSearching', false);
    },
  }
});
```
```html
<section class="main-body {{if isSearching "search-active"}}">
    <section class="main-wrap" {{action 'search_hide'}}>
    </section>
</section>
```

如果觉得有帮忙，您可以在本页底部留言。

Ember之Handlebars模板引擎

全部留言

我要留言