×

EmberJS 教程

EmberJS 概述EmberJS 环境配置EmberJS 应用EmberJS 对象模型EmberJS 模板EmberJS 路由器EmberJS 组件EmberJS 模型EmberJS 视图EmberJS 控制器EmberJS 测试EmberJS 指定查询参数

Ember 对象模型

Ember 类的定义 初始化 继承Ember 类的扩展Ember 计算属性Ember 观察者Ember 数据绑定Ember 枚举Ember 第一章对象模型小结

Ember handlebars模板

Ember handlebars基础Ember handlebars条件表达式Ember handlebars遍历标签Ember handlebars显示对象键Ember handlebars属性绑定Ember {{link-to}} 助手Ember 路由 模板执行渲染顺序Ember {{action}} 助手Ember 表单元素Ember 调试助手Ember 工具类的助手Ember 第二章模板小结

Ember 路由

Ember 路由定义Ember 指定与路由关联的模型Ember 模板渲染Ember 路由重定向Ember 路由终止挑战和激活Ember loading error子路由Ember 查询参数Ember 异步路由

Ember 组件

Ember 组件定义Ember 属性传递Ember 包裹内容自定义包裹组件的HTML标签Ember 处理事件Ember action触发变化

Ember 控制器

Ember 控制器Ember 管理控制器的依赖关系

Ember 模型

Ember model简介Ember 定义模型Ember 记录查询Ember 新建、更新、删除记录Ember 设置记录到StoreEmber model的关联关系处理Ember 元数据Ember 自定义适配器Ember 自定义序列号器

Ember 测试

Ember 测试简介Ember 验收测试Ember 单元测试

Ember handlebars条件表达式


handlebars模板提供了与一般语言类似的条件表达式,比如ifif……else……。 在介绍这些条件表达式之前,我们先做好演示的准备工作。首先我会使用Ember CLI命令创建routetemplate,然后在创建的template上编写handlebars模板代码。 先创建route
ember generate route handlbars-conditions-exp-route
或者:
ember generate route handlbarsConditionsExpRoute
这两个命令创建的文件名都是一样的。最后Ember CLI会为我们自动创建2个主要的文件:app/templates/handlbars-conditions-exp-route.hbsapp/routes/handlbars-conditions-exp-route.js

注意:如果你使用的是驼峰式的名称Ember CLI会根据Ember的命名规范自动创建以中划线-分隔的名称。为什么我是先使用命令创建route而不是template呢??因为你创建route的同时Ember CLI会自动给你创建一个对应的模板文件,如果你是先创建template的话,你还需要手动再执行创建route的命令,即你要执行2条命令(ember generate template handlbars-conditions-exp-routeember 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)。

1,if表达式


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

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


测试内容

这个if标签相当于一个三元运算符,只是省略了?:,他会根据属性flag的值判断是显示那个CSS类,如果flag的值不是false,不是[]空数组,也不是null,也不是undefineddiv会加上CSS类show,模板编译之后的标签为

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

2,if……else……表达式


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

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

3,unless表达式

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


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

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

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

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


enable or disable

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

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


分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号:472910771)