ember.js - 如何根据 Ember 中的某些条件更改输入助手的类

Question

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

我试过了：

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

它导致了构建错误。

这errors.name是控制器的财产。

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

Answer 1

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

{{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")}}

仅在条件为 false 时添加类：

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

两个条件：

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

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

Answer 2

因为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>. 请参阅此处的文档。

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