Combing conditional class binding with existing class
ember.js
Solution
In the template guides it describes a way to combine static and bound classes for one item:
If you need an element to have a combination of static and bound classes, you should include the static class in the list of bound properties, prefixed by a colon.
In your case you would do something like this:
<a href="#" {{bindAttr class=":button isDirty:dirty:clean"}} {{action save}}>Save</a>
Here is a working example http://jsbin.com/ixupad/82/edit
Problem
I am noticing an issue with conditional attribute bindings when trying to combine them with a regular class on the same element. Here is the handlebars markup I am trying: ``` <a href="#" class="button" {{bindAttr class="isDirty:dirty:clean"}} {{action save}}>Save</a> ``` What I expect to be generated is: ``` <a href="#" class="button clean" data-bindattr-3="3" data-ember-action="4">Save</a> ``` But what is actually generated is: ``` <a href="#" class="button" data-bindattr-3="3" data-ember-action="4">Save</a> ``` When I modify the model, it correctly generates the dirty class: ``` <a href="#" class="button dirty" data-bindattr-3="3" data-ember-action="4">Save</a> ``` If I try move the class after the binding, it will generate the conditional class rather than the declared one: ``` <a href="#" {{bindAttr class="isDirty:dirty:clean"}} class="button" {{action save}}>Save</a> ``` Generates the conditional but not button class: ``` <a href="#" class="clean" data-bindattr-3="3" data-ember-action="4">Save</a> ``` What I want is to have it generate both the combined declared class and the conditional class using just Handlebars (without having to create a view). Is there another way to do this?