Question

如何在输入助手中使用{{input class="{{if errors.name "style-error"}}" }}条件子句。

我试过了：

errors.name

造成了建筑错误。

这里的edmx是来自控制器的属性。

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

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。请参阅文档here。

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

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

2 个答案: