Ember.js 入门指南——handlebars条件表达式
来源:互联网 发布:医生都善良知乎 编辑:程序博客网 时间:2024/05/19 20:44
本系列文章全部从(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上下载。
- Ember.js 入门指南——handlebars条件表达式
- Ember.js 入门指南——handlebars基础
- Ember.js 入门指南——handlebars遍历标签
- Ember.js 入门指南——handlebars属性绑定
- Ember.js 入门指南——handlebars显示对象的键(未完待续)
- Ember.js 入门指南——目录
- Ember.js 入门指南——扩展(reopen)
- Ember.js 入门指南——观察者(observer)
- Ember.js 入门指南——绑定(bingding)
- Ember.js 入门指南——枚举(enumerables)
- Ember.js 入门指南——{{link-to}} 助手
- Ember.js 入门指南——{{action}} 助手
- Ember.js 入门指南——表单元素
- Ember.js 入门指南——调试助手
- Ember.js 入门指南——工具类的助手
- Ember.js 入门指南——路由简介
- Ember.js 入门指南——路由定义
- Ember.js 入门指南——路由重定向
- ffmpeg 新老接口问题及对照集锦
- Edit Distance
- (转)Http学习之使用HttpURLConnection发送post和get请求
- 关于理想
- Java 内部类总
- Ember.js 入门指南——handlebars条件表达式
- Oracle中varchar,varchar2,nvarchar,nvarchar2的区别
- Java并发编程:线程池的使用
- Hadoop 2.6.0动态添加节点
- 回溯算法:基本思想以及方法
- Leetcode #2 Add Two Numbers
- hduoj 绝对值排序 题目2020
- 高明鑫《最新Android入门课程》课堂笔记二
- 372 巧克力【最大子矩阵】