#linkTo helper 中的动态 CSS 类字符串（使用 ember.js 版本 pre4）答案

【问题标题】：Dynamic CSS class string in #linkTo helper (using ember.js version pre4)#linkTo helper 中的动态 CSS 类字符串（使用 ember.js 版本 pre4）
【发布时间】：2013-01-29 23:07:36
【问题描述】：

我有一个这样的车把模板：

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

一切正常。我的模型对象如下所示：

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

我想在"#linkTo" 助手中使用"cssClass" 属性。现在，如何（从语法上）完成？

我试过这个，但这显然不起作用，因为使用{{section.cssClass}} 不会呈现section.cssClass 的值，而是呈现裸字符串"{{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>

我找不到可行的解决方案，有人可以在这里为我指出正确的方向，还是很简单无法实现我想做的事情？我应该以不同的方式构建链接吗？

【问题讨论】：

我没有亲自使用过#linkTo 助手，但通常在视图中您应该使用classNames 分配类，或者在本例中为classNameBindings。 {{#linkTo "section" section classNameBindings="section.cssClass"}}
谢谢 :) {{#linkTo "section" section classNameBindings="section.cssClass"}} 做到了！！

标签： javascript ember.js handlebars.js

【解决方案1】：

对于其他在这里磕磕绊绊的人，解决方案是使用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>

【讨论】：

【解决方案2】：

是的，我有这个：

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

并且需要这样做，使其成为输入助手，但无法弄清楚如何关闭元素（新手）：

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

所以 classNameBindings 来拯救：

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

【讨论】：