Question

使用已经过度使用的待办事项应用示例，假设我想要一个带有“todo”类（静态）和“is-done”类（动态）的元素：

<div {{bindAttr class="todo isDone"}}>
  Other stuff in here
</div>

在这种情况下，“isDone”和“todo”都应该是我的视图对象的属性，这是我想要的“isDone”，而不是“todo”。我目前正在通过在我的视图上添加一个“todo”属性来解决这个问题，该属性等于静态“todo”字符串。使用bindAttr时有没有办法获得静态类属性？

小提琴示例：http://jsfiddle.net/nes4H/4/

Answer 1

修改

我们已经在Ember中解决了这个问题！

在来自master的构建中，或者在0.9.6发布之后，您现在可以执行以下操作：

<div {{bindAttr class="App.foo:a-bound-class :a-static-class"}}></div>

上一个回答：

遗憾的是，在使用bindAttr时，您无法同时拥有静态和动态类名。

我建议在视图上使用一个或多个计算属性来输出静态和动态类名。

支持静态和动态类名称会非常好，但bindAttr目前的工作方式是不可能的。 bindAttr对模板编译过程中附加的元素一无所知。

Answer 2

我不知道你是否可以用bindAttr来做，但#view帮助器允许你设置静态类和动态类：

{{#view App.TodoView class="todo" classBinding="isDone"}}
  inner content
{{/view}}

Answer 3

在Ember master中，今天提交了一项更改，允许在bindAttr中通过添加冒号来指定静态类。

https://github.com/emberjs/ember.js/commit/ce385e3294be019215c555511c7f393aebc02e41

当然，这可能会在下一个版本发布之前发生变化，但这是Ember核心团队想要解决的问题。

Answer 4

在ember 1.10.0中，不推荐使用bindAttr。您可以直接将变量绑定到div类。这里color变量绑定到div的类：

<div class="{{color}}"></div>

内联if帮助器也可以在这些上下文中使用：

<div class="{{color}} {{if isEnabled 'active' 'disabled'}}"></div>

http://emberjs.com/blog/2015/02/07/ember-1-10-0-released.html

在Ember.js Handlebars模板中，有没有办法同时拥有静态和动态类属性？

4 个答案: