灰烬HTMLBars直列组合条件

当试图具有与Ember 1.13 HTMLBars一个简单的条件样式级分配，下面的代码做了伟大的工作：灰烬HTMLBars直列组合条件

{{#each items as |item|}} 
    <li class="tag {{if item.selected 'active' 'inactive'}}">{{item.key}}</li> 
{{/each}}

不过，有没有办法在结合条件大写，像检查另一个条件？像下面的代码...

{{#each items as |item|}} 
    <li class="tag {{if (item.selected or noneSelected) 'active' 'inactive'}}">{{item.key}}</li> 
{{/each}}

...或者是通过Ember助手来实现对多个条件的检查的唯一方法吗？

感谢您的支持！

来源

2015-09-04 L-Ray

你会希望自己的帮手，让我们把它叫做conditional-or：

import Ember from 'ember'; 

const { Helper: { helper } } = Ember; 

export function conditionalOr(conditions, {valid, invalid}) { 
    invalid = invalid || ''; 
    return conditions.some(elem => elem) ? valid : invalid; 
} 

export default helper(conditionalOr);

什么some()确实是遍历数组元素，当一个符合标准的返回true。

而你，也就能够使用它，在你的模板，像这样：

<li class="tag {{conditional-or item.selected noneSelected valid='active' invalid='inactive'}}">{{item.key}}</li>

来源

2015-09-04 08:11:46

嗨@Kitler，感谢您的快速响应。为了让你的例子工作，html元素中的参数必须改为“valid”和“invalid”，而不是“active”和“inactive” - 并且它像charme一样运行。谢谢。希望在HTMLBars中包含一个版本，因为这似乎是一个常见的用例。 –

Oups，不错的地方开始写佣工的选择传递其他操作数错过了它xx –

@ L-Ray它确实很常见，但它可以用很多方式处理，另一个是项目的组件，并让它处理逻辑我们也有能力制作我们自己的定制助手。 –

灰烬HTMLBars直列组合条件

回答

相关问题