条件表达式

handlebars模板提供了与一般语言类似的条件表达式，比如if、if……else……。

在介绍这些条件表达式之前，我们先做好演示的准备工作。 首先我会使用Ember CLI命令创建route、template，然后在创建的template上编写handlebars模板代码。 先创建route：

ember generate route handlbars-conditions-exp-route

或者：

ember generate route handlbarsConditionsExpRoute

这两个命令创建的文件名都是一样的。 最后Ember CLI会为我们自动创建2个主要的文件：

• app/templates/handlbars-conditions-exp-route.hbs
• app/routes/handlbars-conditions-exp-route.js

注意：如果你使用的是驼峰式的名称Ember CLI会根据Ember的命名规范自动创建以中划线-分隔的名称。

创建route的同时Ember CLI会自动给你创建一个对应的模板文件，如果先创建template需要手动再执行创建route的命令

即要执行2条命令

• ember generate template handlbars-conditions-exp-route
• ember generate route handlbars-conditions-exp-route)。

得到演示所需要的文件后回到正题，开始介绍handlebars的条件判断表达式。

为了演示先在route文件添加模拟条件代码：

//  app/routes/handlebars-condition-exp-route.js

import Ember from 'ember';

export default Ember.Route.extend({

    model: function () {
        return {name: 'i2cao.xyz', age: 25, isAtWork: false, isReading: false };
        // return { enable: true };
    }       
});

对于handlebars-condition-exp-route.js这个文件的内容会在后面路由这一章详细介绍， 可以暂且当做是返回了一个对象到模板上。

与EL表达式非常类似，可以用.获取对象里的属性值（如：person.name）。

if表达式

{{#if model}}
Welcome back, <b>{{model.name}}</b> !
{{/if}}

每个条件表达式都要以#开头并且要有对应的关闭标签，但是对于if标签来说不是必须要关闭标签的，这里简单举个例子：

<div class="{{if flag 'show' 'hide'}}">
测试内容
</div>

if……else……表达式

{{#if model.isAtWork}}
Ship that code..<br>
{{else if model.isReading}}
You can finish War and Peace eventually..<br>
{{else}}
This is else block...
{{/if}}

结果是输出：

This is else block...

因为isAtWork和isReading都是false。读者可以自己修改app/routes/handlebars-condition-exp-route.js里面对应的值然后查看输出结果。

unless表达式

unless表达式类似于非操作，当model.isReading值为false的时候会输出表达式里面的内容。

{{#unless model.isReading}}
unless.....
{{/unless}}

如果isReading值为false会输出unless…否则不进入表达式内。

在HTML标签内使用表达式

handlebars表达式可以直接在嵌入到HTML标签内。

<span class="{{if" enable="" 'enable'="" 'disable'}}="">enable or disable</span>