Dynamic CSS class string in #linkTo helper (using ember.js version pre4)

Question

I have a handlebars template like this:

<script type="text/x-handlebars" data-template-name="sections">
  {{#each section in controller}}
    {{#linkTo "section" section}} {{ section.label }} {{/linkTo}}
  {{/each}}
</script>

and everything works fine. My model object looks like this:

App.Section = DS.Model.extend({
 sectionDetail: DS.attr('number'),
 label: DS.attr('string'),
 cssClass: DS.attr('string')
});

and I would like to use the "cssClass" property inside the "#linkTo" helper. Now, how can it be done (syntactically)?

I tried this, but this obviously does not work, because using {{section.cssClass}} does not render the value of section.cssClass but the bare string "{{section.cssClass}}" .

<script type="text/x-handlebars" data-template-name="sections">
  {{#each section in controller}}
    {{#linkTo "section" section class="{{section.cssClass}}"}} {{ section.label }} {{/linkTo}}
  {{/each}}
</script>

I can't find a solution that does work, could someone point me in the right direction here, or it's simple not possible to achieve what I want to do? Should I construct the links differently?

Answer 1

For anyone else stumbling here, the solution is to use classNamesBindings .

<script type="text/x-handlebars" data-template-name="sections">
  {{#each section in controller}}
    {{#linkTo "section" section classNameBindings="section.cssClass"}} 
      {{section.label }}
    {{/linkTo}}
  {{/each}}
</script>

Answer 2

Yep, I had this:

<input type="checkbox" {{bind-attr class=":toggle isLiked:toggleHighlight"}}>

And needed to do this, make it into an input helper, but couldn't figure how to close the element (novice):

{{input type="checkbox" checked=isLiked}}

And so classNameBindings to the rescue:

{{input type="checkbox" checked=isLiked classNameBindings=":toggle isLiked:toggleHighlight"}}