#3 条件判断

来源:互联网 发布:邓肯数据 编辑:程序博客网 时间:2024/06/14 10:38

英文原版:https://guides.emberjs.com/v2.13.0/templates/conditionals/

像比如if 或者 unless这样的语句,在Ember中也被作为助手实现了。助手有三种被调用的方式,下面就来了解每种的调用方式。

行内调用

第一种—- 行内调用。这看上去就与显示属性的写法差不多,不过需要接收参数:

<div>  {{if isFast "zoooom" "putt-putt-putt"}}</div>

在上面的代码中,当isFast为true时,{{if}}助手会会返回”zoooom”;反之,会返回 “putt-putt-putt”。助手通过行内表达式的形式被调用,就像之前的章节中,我们区显示一个属性一样的写法。

行内助手不仅可以写在元素便签中,同样也可以写在元素的属性中:

<div class="is-car {{if isFast "zoooom" "putt-putt-putt"}}"></div>

嵌套调用

第二种—-嵌套调用,另一种使用助手的方式。如同行内助手,嵌套助手也生成并且返回一个值。比如,在下面的例子中,当且仅当isFast和isFueled都为true时,模版才会将”zoooom”渲染到模版上。

<div>  {{if isFast (if isFueled "zoooom")}}</div>

块方式

第三种—块方式。通过块方式,可以渲染模版的一部分。块方式通过在助手名称的开头加”#”,在助手的结束名称加”/”来定义。

比如,下面的模版仅会在person有定义且属性存在的情况下才渲染模版:

{{#if person}}  Welcome back, <b>{{person.firstName}} {{person.lastName}}</b>!{{/if}}

{{if}}会检查条件 的真值,并且:flase, undefined, null , ’ ‘, 0 和[ ]会被认为是假。

如果if中的变量被认为是假,那么{{else}}块就会被执行渲染:

{{#if person}}  Welcome back, <b>{{person.firstName}} {{person.lastName}}</b>!{{else}}  Please log in.{{/if}}

{{else}}的用法与if….else….语句中else的用法一致,不过通常用{{else if}}:

{{#if isAtWork}}  Ship that code!{{else if isReading}}  You can finish War and Peace eventually...{{/if}}

与{{if}}相对的是{{unless}},它的判断方式与{{if}}相反。使用方式也是上面介绍的3种方式。例子,下面模版仅在hasPaid值为假的时候才会被渲染:

{{#unless hasPaid}}  You owe: ${{total}}{{/unless}}

本节完

原创粉丝点击