Ember HTMLBars 内联组合条件

Question

当尝试使用 Ember 1.13 在 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 帮助程序检查多个条件的唯一方法？

感谢您的支持！

Answer 1

你会想要创建自己的助手，我们称之为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>