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

Question

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

我试过：

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

导致构建错误。

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

我估计是嵌套的双花括号导致语法错误，但不知道如何实现这个条件class声明。

Answer 1

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

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

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

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

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

Answer 2

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

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

你应该使用这个而不是 xxxBinding="..." 语法

---

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

有条件加静态+动态class:

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

有条件地添加两个动态classes:

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

如果条件为真，加一个class，如果条件为假，加一个：

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

只在条件为假时加一个class：

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

两个条件：

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

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