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而不是template呢？？因为你创建route的同时Ember CLI会自动给你创建一个对应的模板文件，如果你是先创建template的话，你还需要手动再执行创建route的命令，即你要执行2条命令(ember generate template handlbars-conditions-exp-route和ember generate route handlbars-conditions-exp-route)。

得到演示所需要的文件后回到正题，开始介绍handlebars的条件判断表达式。
为了演示先在route文件添加模拟条件代码：

1
2
3
4
5
6
7
8
9
10
11
//  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）。

1，if表达式

1
2
3
4
5
6
<!-- app/templates/handlbars-conditions-exp-route.hbs -->

<!-- if判断标签，当model的值不为 false, undefined, null or [] 的时候显示标签内的内容 -->
{{#if model}}
Welcome back, <b>{{model.name}}</b> !
{{/if}}

run result

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

1
2
3
4
<!-- 没有关闭关闭标签的if用法 -->
<div class="{{if flag 'show' 'hide'}}">
测试内容
</div>

这个if标签相当于一个三元运算符,只是省略了?和:,他会根据属性flag的值判断是显示那个CSS类，如果flag的值不是false，不是[]空数组，也不是null，也不是undefined则div会加上CSS类show，模板编译之后的标签为<div class="show">，否则会加CSS类hide模板编译之后的标签为<div class="hide">。这样解释应该很容易理解了，其实说白了就一个if判断。没别的难点。。。

运行的时候需要注意两个地方，一个是浏览器执行的URL。如果你也是使用驼峰式的命名方式（创建命名：ember generate route handlbarsConditionsExpRoute），那你的URL跟我的是一样的，反正你只要记得执行的URL跟你创建的route的名称是一致的。当然这个名字是可以修改的。在app/router.js里面修改，在Router.map里的代码也是Ember CLI自动创建的。我们可以看到有一个this.route('handlebarsConditionsExpRoute');这个就是你的路由的名称。

建议：创建之后的路由名字最好不要修改，ember会根据默认的命名规范查找route对应的template，如果你修改了router.js里的名字你需要同时修改app/routes 和 app/templates 里相对应的文件名。否则URL上的路由无法找到对应的template显示你的内容，在router.js里配置的名字必须与app/routes目录下的路由文件名字对应，模板的名字不一定要与路由配置名称对应，应该可以在route类中指定渲染的模板是那个，这个后面的内容会讲到（不是重点内容，了解即可）。
说明：可能你看到的我截图给你的有点差别，是因为我修改了主模板(app/index.html)你可以在这个文件里添加自己喜欢的样式，你一在app/index.html引入你的样式，或者在ember-cli-build.js引入第三方样式都可以，自定义的样式放在public/assets/下，如果没有目录可以自行手动创建，在此就不再赘述，这个不是本文的重点。

2，if⋯⋯else⋯⋯表达式

1
2
3
4
5
6
7
8
9
<!-- app/templates/handlebars-conditions-exp-route.hbs -->
<!-- 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里面对应的值然后查看输出结果。

3，unless表达式

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

1
2
3
4
5
<!-- app/templates/handlebars-conditions-exp-route.hbs -->
<!-- 非判断 -->
{{#unless model.isReading}}
unless.....
{{/unless}}

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

4，在HTML标签内使用表达式

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

1
2
3
<!-- app/templates/handlebars-conditions-exp-route.hbs -->
<!-- 可以把表达式直接嵌入在某个标签中，当enable的值为true则结果是增加了一个类(css的类)enable，否则增加'disable' -->
<span class={{if enable 'enable' 'disable'}}>enable or disable</span>

说白了其实就是一个三目运算。不难理解。不过这个例子与第一点讲没有关闭标签的if例子一致，就当是复习吧=^=。

上述就是handlebars中最常用的几个条件表达式，自己作为小例子演示一遍肯定懂了，对于有点惊讶的开发者甚至看一遍即可。非常的简单，可能后面还会有其他的条件判断的表达式，后续会补上。


博文完整代码放在Github（博文经过多次修改，博文上的代码与github代码可能又出入，不过影响不大！），如果你觉得博文对你有点用，请在github项目上给我点个star吧。您的肯定对我来说是最大的动力！！