Question

我有一个像这样的把手模板：

<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')
});

我想在"cssClass"帮助器中使用"#linkTo"属性。现在，怎么做（语法上）？

我尝试了这一点，但这显然不起作用，因为使用{{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>

我找不到一个有效的解决方案，有人能指出我在这里正确的方向，或者很难实现我想做的事情吗？我应该以不同方式构建链接吗？

Answer 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>

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

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

2 个答案: