javascript - 将类绑定(bind)到 ember 中的 div

Question

我想根据 ember 中的动态值将类绑定(bind)到 div；它应该在值为 false 时隐藏 DOM 元素，并在值为 true 时向其添加两个类。

这是我的代码:

<div {{bindAttr class="App.User.isLoggedIn:alert alert-error:hide" }} >
    ...
</div>

但是绑定(bind)不起作用，即使 app.User.isLoggedIn 为 false，它也会继续显示 div。

如何根据真实条件绑定(bind)多个类？

Answer 1

因此，要混合绑定(bind)属性(在您的情况下为类名)，您可以列出用空格分隔的绑定(bind)条件。

基本上，在您的 {{bindAttr ...}} 助手中，您可以编写 boundAttr="criterion1 criterion2 criterion3"，其中各个绑定(bind)标准扩展为以下格式:

属性替换

propertyName

这在 classNames 中 stub 有两种不同的行为:

1. 如果属性值为 bool 值:破折号的属性名称
2. 如果属性值为字符串:字符串值

静态类/始终为真:

:className

始终将类名添加到 div。

以属性为条件:

propertyName:trueClass 
propertyName:trueClass:falseClass 
propertyName::falseClass

评估属性，并根据真值/假值分配适当的类。

在您的情况下，由于您希望将两个类卡在同一个属性上，您可以这样做:

<div {{bindAttr class="App.User.isLoggedIn:alert App.User.isLoggedIn:alert-error:hide"}} >
    ...
</div>

注意这里的空格。第一个标准只处理警报类，而第二个标准相应地处理“警报错误”或“隐藏”类。

如果您想要更简单的东西，您可以有一个计算属性来确定您需要在 View 或模型中应用的字符串。

那你可以做

// in your view
classesNeeded: function() {

   return App.User.get('isLoggedIn') ? 'alert alert-error' : 'hide';

}.property('App.User.isLoggedIn')

然后:

<div {{bindAttr class="view.classesNeeded"}} >
        ...
    </div>

假设您需要第三个默认类来应对所有情况，您可以这样做:

<div {{bindAttr class=":defaultClass view.classesNeeded"}} >
        ...
    </div>

您可以在新的 ember.js 文档中阅读有关属性和类绑定(bind)的更多信息，此处: http://emberjs.com/guides/templates/binding-element-class-names/