在bind-attr中基于多个条件添加类 [英] Adding class based on multiple conditions in bind-attr

问题描述

我需要基于两个值添加错误类别：

I am needing to add an error class based on two values:

<div {{bind-attr class="anyErrors:errors.email:ui-input--error"}}>

因此，如果anyErrors为true并且errors.email为true，它将把该类放在div上。我已经尝试了几件事，但似乎没有任何效果。

So if anyErrors is true AND errors.email is true it puts the class on the div. I have tried several things but nothing seems to work. Any help is much appreciated.

推荐答案

在这种情况下，只需使用常规的计算属性即可。模板内部的三元形式对于简单的逻辑很有用，但是在多种条件下会变得很臭。

Just use a normal computed property in this case. Ternary form inside of templates is good for simple logic, but gets smelly with multiple conditions.

所以：

<div {{bind-attr class="anyErrors:errors.email:ui-input--error"}}>

应为：

<div {{bind-attr class="errorClass"}}>

现在只需创建您的计算属性：

Now just create your computed property:

errorClass: function () {
  return this.get('anyErrors') && this.get('errors.email') ? 'error' : '';
}.property('anyErrors','errors.email')

您可以去当然还有其他方式。对我来说，这是最干净的模式。

You can go about this other ways, of course. To me, this is the cleanest pattern.

这篇关于在bind-attr中基于多个条件添加类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！