javascript - 将类绑定到 ember 中的 div

Question

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

这是我的代码：

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

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

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

Answer 1

因此，要获得绑定属性（在您的情况下为类名）的组合，您可以使用空格列出单独的绑定条件。

基本上，在您的 {{bindAttr ...}} 助手中，您可以编写 boundAttr="criterion1criterion2criteria3"，其中单个绑定标准扩展为以下格式：

属性替换

propertyName

这在 classNames 中具有两种不同的行为：

1. 如果属性值为布尔值：破折号属性名称
2. 如果属性值是字符串：字符串值

静态类/始终为真：

:className

总是将类名添加到 div。

以属性为条件：

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

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

在你的情况下，因为你想让两个类挂在同一个属性上，你可以这样做：

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