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>