25

In regular handlebars I was able to do:

<div {{bind-attr class="model.isNew:new:old"}}>

How can I do this in Htmlbars? I tried this but it didn't work.

<div class="{{model.isNew:new:old}}">
jax
  • 37,735
  • 57
  • 182
  • 278

1 Answers1

45

This was mentioned in the 1.10 release/1.11 beta blog post:

<div class="{{if model.isNew 'new' 'old'}}">

You can also still use the {{bind-attr}} helper, although I think it might be deprecated.

GJK
  • 37,023
  • 8
  • 55
  • 74
  • Any idea where this is documented? – Matt Jensen Apr 16 '15 at 18:50
  • 1
    Unfortunately I've only seen it in that blog post and the PR. I can't find it in the documentation. – GJK Apr 16 '15 at 19:03
  • 1
    This is an unfortunate design decision. I made frequent use of the `{{bind-attr class="isFoo"}}` style, which automatically generated the `is-foo` class. Now I have to write `class="{{if isFoo 'is-foo'}}"`. A step backward. In the syntax `class="{{isFoo}}"`, if `isFoo` is boolean, it should mimic the old behavior by generating `class="is-foo"` instead of the meaningless `class="true"`. –  Apr 20 '15 at 13:59
  • 1
    Remember though, you can now use _any_ Handlebars expression there. So you could easily write a helper that would allow you to do this: `{{toggle-class isFoo}}`. You can even use subexpressions. `bind-attr` was cool when it's all we had, but the sky is the limit now! – GJK Apr 20 '15 at 14:02
  • 3
    Anyone looking for the 1.13 documentation for this feature, it is here: http://guides.emberjs.com/v1.13.0/templates/binding-element-class-names/ – Christopher Milne Aug 06 '15 at 17:12
  • As of today, you don't need the double-quotes around the mustaches, it would look like : `class={{if shouldDisplayFooter 'with-footer'}}` – Cécile Fecherolle Jul 30 '18 at 07:48
  • thank you! I used `#if` with following error, so simple but it didn't reach me – Alex Strizhak Apr 06 '19 at 13:02