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

Question

使用已经过度使用待办事项应用例子，让我们说，我想用“待办事项”类（静态）的元素和“IS-完成”级（动态）：

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

在这种情况下， ，“isDone”和“todo”都是我的视图对象的属性，这是我想要的“isDone”，但不是“待办事项”。我目前正在通过在我的视图中添加一个“todo”属性来解决此问题，该属性等同于静态“todo”字符串。使用bindAttr时有什么方法可以获得静态类属性吗？

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

Answer 1

编辑：

我们已经在Ember修复了这个问题！

在从主构建，或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

这可能会在未来发布前改变，当然，不过这是灰烬核心团队要解决的一个问题。

Answer 4

在ember 1.10.0中，不推荐使用bindAttr。你可以直接将一个变量绑定到div类。这里的颜色变量被绑定到类一个div：

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

如果帮手也可以在这些环境中使用内联：

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

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