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

ember.js, handlebars.js, javascript

Solution

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>

Problem

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?

Original source