如何根据 Ember 中的某些条件更改输入助手的类答案

【问题标题】：How to change input helper's class based on some condition in Ember如何根据 Ember 中的某些条件更改输入助手的类
【发布时间】：2016-02-10 00:52:09
【问题描述】：

if 条件子句如何在输入助手中使用。

我试过了：

{{input class="{{if errors.name "style-error"}}" }}

导致构建错误。

这里的errors.name 是控制器的属性。

我认为是嵌套的双花括号导致语法错误，但不知道如何实现这种条件类声明。

【问题讨论】：

【解决方案1】：

因为input 在这里是一个 Ember 助手而不是 HTML 元素，所以使用 classBinding -

{{input classBinding="errors.name:style-error"}}

classBinding 采用<condition>:<class if true>:<class if false> 格式的以空格分隔的参数列表。所以在这种情况下，style-error 将在 errors.name 评估为 true 时应用（即密钥存在于哈希中）。

它的语法与bind-attr 相同。此外，:<class> 有效，<condition>::<class if false>。请参阅文档here。

请注意，当前支持 classBinding（讨论 here），但预计在 3.0 之前的某个时间会弃用（带有适当的弃用警告），并引入尖括号组件。

【讨论】：

【解决方案2】：

您可以使用括号嵌套助手：

{{input class=(if errors.name "style-error")}}

您应该使用它而不是 xxxBinding="..." 语法

您可以使用concat 助手有条件地添加多个类：

有条件的添加静态+动态类：

{{input class=(if errors.name (concat "static-class " dynamicClass))}}

有条件地添加两个动态类：

{{input class=(if errors.name (concat dynamicClass1 " " dynamicClass2))}}

如果条件为真，则添加一个类，如果为假，则添加另一个：

{{input class=(if errors.name "style-error" "style-success")}}

仅当条件为假时才添加类：

{{input class=(unless errors.name "style-success")}}

两个条件：

{{input class=(concat (if errors.name "name-error") " " (if errors.date "date-error"))}}

对于更复杂的布尔算术（例如和/或/非、相等和比较），您可以使用ember-truth-helpers

【讨论】：