将条件类绑定与现有类进行梳理

Question

在尝试将它们与同一元素上的常规类组合时，我注意到条件属性绑定的问题。这是我正在尝试的把手标记：

<a href="#" class="button" {{bindAttr class="isDirty:dirty:clean"}} {{action save}}>Save</a>

我期望产生的是：

<a href="#" class="button clean" data-bindattr-3="3" data-ember-action="4">Save</a>

但实际产生的是：

<a href="#" class="button" data-bindattr-3="3" data-ember-action="4">Save</a>

当我修改模型时，它正确生成了脏类：

<a href="#" class="button dirty" data-bindattr-3="3" data-ember-action="4">Save</a>

如果我尝试在绑定后移动类，它将生成条件类而不是声明的类：

<a href="#" {{bindAttr class="isDirty:dirty:clean"}} class="button" {{action save}}>Save</a>

生成条件但不是按钮类：

<a href="#" class="clean" data-bindattr-3="3" data-ember-action="4">Save</a>

我想要的是让它只使用Handlebars生成组合的声明类和条件类（无需创建视图）。还有另一种方法吗？

Answer 1

在template guides中，它描述了一种组合一个项目的静态和绑定类的方法：

  

如果需要一个元素具有静态类和绑定类的组合，则应该在绑定属性列表中包含静态类，前缀为冒号。

在你的情况下，你会做这样的事情：

<a href="#" {{bindAttr class=":button isDirty:dirty:clean"}} {{action save}}>Save</a>

以下是一个工作示例http://jsbin.com/ixupad/82/edit

Answer 2

从Ember 1.11开始，您可以使用inline-if-syntax

<a href="#" class="button {{if isDirty 'dirty' 'clean'}}" {{action save}}>
  Save
</a>