Question

我想基于ember中的动态值将类绑定到div;它应该在false元素时隐藏它，并在值为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中的行为有两种不同的行为：

如果属性值是布尔值：dasherized属性名称
如果属性值是字符串：字符串值

静态类/始终为真：

: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/

Answer 2

请尝试使用classNameBindings。您可以根据所选属性的状态添加或删除样式类

例如，这是Emberjs文档中的一个例子：

// Applies no class when isEnabled is true and class 'disabled' when isEnabled is false
Ember.View.create({
  classNameBindings: ['isEnabled::disabled']
  isEnabled: true
});

将导致视图实例的HTML表示形式为：

<div id="ember1" class="ember-view"></div>

当视图上的isEnabled属性设置为false时，它将导致HTML表示形式为的视图实例：

<div id="ember1" class="ember-view disabled"></div>

将类绑定到ember中的div

2 个答案: