Ember.js 入门指南——handlebars条件表达式

 本系列文章所有从（http://ibeginner.sinaapp.com/）迁移过来，欢迎访问原网站。

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文件添加模拟条件代码：

//  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 };
       }            
});

    对于route这个文件的内容会在后面route这一章详细介绍，你能够暂且当作是返回了一个对象到页面上。与EL表达式很是相似，你能够用“.”获取对象里的属性（如：person.name）。

1，  if表达式

 <!-- app/templates/handlbars-conditions-exp-route.hbs -->
 
<!-- if判断标签，当熟悉model的值不为 false, undefined, null or [] 的时候显示标签内的内容 -->
{{#if model}}
Welcome back, <b>{{model.name}}</b> !
{{/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显示你的内容。

说明：可能你看到的我截图给你的有点差异，是由于我修改了主模板(app/index.html)你能够在这个文件里添加本身喜欢的样式，在此就再也不赘述，这个不是本文的重点。

2，  if……else……表达式

<!-- 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的时候会输出表达式里面的内容。

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

若是isReading值为false会输出unless…不然不进入表达式内。

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

handlebars表达式能够直接在嵌入到HTML标签内。

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

上述表达式其实就是一个三目运算。不难理解。

       上述就是handlebars中最经常使用的几个条件表达式，本身做为小例子演示一遍确定懂了，对于有点惊讶的开发者甚至看一遍便可。很是的简单，可能后面还会有其余的条件判断的表达式，后续会补上。

若是你须要完整的代码能够从github上下载。