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?

I haven't personally used the #linkTo helper, but generally in views you should assign classes with classNames, or in this case classNameBindings. {{#linkTo "section" section classNameBindings="section.cssClass"}} — Bradley Priest
– Bradley Priest, Commented Jan 29, 2013 at 23:38
Thank you :) {{#linkTo "section" section classNameBindings="section.cssClass"}} did it!! — intuitivepixel
– intuitivepixel, Commented Jan 29, 2013 at 23:43

Bradley Priest · Accepted Answer · 2013-01-30 01:08:58Z

19

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>

answered Jan 30, 2013 at 1:08

Bradley Priest

7,4581 gold badge31 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ben Crowhurst · Accepted Answer · 2014-10-06 08:41:45Z

-1

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"}}

edited Oct 6, 2014 at 8:41

Ben Crowhurst

8,5607 gold badges52 silver badges81 bronze badges

answered Jul 27, 2014 at 23:40

DavidK

111 bronze badge

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related