将类绑定到ember中的div

Question

我想基于ember中的动态值将类绑定到div; 它应该在错误时隐藏DOM元素,并在值为true时向其添加两个类.

这是我的代码:

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

但是绑定不起作用,即使app.User.isLoggedIn为false,它也会一直显示div.

如何基于真实条件绑定多个类？

Answer 1

因此,要获得绑定属性的混合(在您的情况下,类名称),您可以列出绑定条件与空格分开.

基本上,在{{bindAttr ...}}帮助器中,您可以编写boundAttr ="criterion1 criterion2 criterion3",其中单个绑定标准扩展为以下格式:

财产替代

propertyName

这个存在于classNames中的行为有两种不同的行为:

1. 如果属性值是布尔值:dasherized属性名称
2. 如果属性值是字符串:字符串值

静态类/始终为真:

:className

始终将类名添加到div.

有条件的财产:

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

评估属性,并根据truthy/falsy值分配适当的类.

在您的情况下,由于您希望在同一属性上挂起两个类,您可以执行以下操作:

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

注意这里的空格.第一个标准只处理警报类,而第二个标准则相应地处理"警告错误"或"隐藏"类.

如果您想要更简单的东西,您可以使用计算属性来确定需要在视图或模型中应用的字符串.

然后你可以做到

// 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文档中阅读有关属性和类绑定的更多信息,请访问:http://emberjs.com/guides/templates/binding-element-class-names/