zoukankan      html  css  js  c++  java
  • 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文件添加模拟条件代码:

     1 //  app/routes/handlebars-condition-exp-route.js
     2  
     3 import Ember from 'ember';
     4  
     5 export default Ember.Route.extend({
     6  
     7        model: function () {
     8               return {name: 'i2cao.xyz', age: 25, isAtWork: false, isReading: false };
     9               // return { enable: true };
    10        }            
    11 });
        对于route这个文件的内容会在后面route这一章详细介绍,你可以暂且当做是返回了一个对象到页面上。与EL表达式非常类似,你可以用“.”获取对象里的属性(如:person.name)。

    1,  if表达式

    1 <!-- app/templates/handlbars-conditions-exp-route.hbs -->
    2  
    3 <!-- if判断标签,当熟悉model的值不为 false, undefined, null or [] 的时候显示标签内的内容 -->
    4 {{#if model}}
    5 Welcome back, <b>{{model.name}}</b> !
    6 {{/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……表达式

    1 <!-- app/templates/handlebars-conditions-exp-route.hbs -->
    2 <!-- if……else……判断 -->
    3 {{#if model.isAtWork}}
    4 Ship that code..<br>
    5 {{else if model.isReading}}
    6 You can finish War and Peace eventually..<br>
    7 {{else}}
    8 This is else block...
    9 {{/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标签内。

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

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

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

    如果你需要完整的代码可以从github上下载。

  • 相关阅读:
    【转】网页窗口DIV自定义拖动
    【转】js获取当前日期时间“yyyy-MM-dd HH:MM:SS”
    JQuery基本知识、选择器、事件、DOM操作、动画
    LinQ高级查询、组合查询、IQueryable集合类型
    使用LinQ进行增删改查
    【转】html之file标签 --- 图片上传前预览 -- FileReader
    钢城干洗中心智能管理系统
    HTTP状态码
    HTTP报文内的HTTP信息
    HTTP协议中概念
  • 原文地址:https://www.cnblogs.com/ubuntuvim/p/4805081.html
Copyright © 2011-2022 走看看