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 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?
Share Improve this question edited Jan 29, 2013 at 23:12 intuitivepixel asked Jan 29, 2013 at 23:07 intuitivepixelintuitivepixel 23.3k3 gold badges58 silver badges51 bronze badges 2 |2 Answers
Reset to default 19For 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>
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"}}
#linkTohelper, but generally in views you should assign classes withclassNames, or in this caseclassNameBindings. {{#linkTo "section" section classNameBindings="section.cssClass"}} – Bradley Priest Commented Jan 29, 2013 at 23:38