Ember HTMLBars 内联组合条件

Question

当尝试使用 Ember 1.13 在 HTMLBars 中进行简单的条件样式-class 赋值时，以下代码做得很好：

{{#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() 所做的是遍历数组元素，当满足条件时 return 为真。

您将能够像这样在您的模板中使用它：

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

Ember HTMLBars 内联组合条件

Ember HTMLBars inline combined conditions

handlebars.js

ember.js

htmlbars