CODEWITHSUNDEEP
ember.js
gbabiars
gbabiars

Reputation: 575

Combing conditional class binding with existing class

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?

Upvotes: 6

Views: 4700

Answers (2)

Mark Fox
Mark Fox

Reputation: 8924

As of Ember 1.11 you may use inline-if-syntax

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

Upvotes: 5

CraigTeegarden
CraigTeegarden

Reputation: 8251

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

Upvotes: 11

Related Questions