1

我有一个与每个助手类似的视图：

<table class="select-sect" cellspacing="0">
{{#each sections}}
<tr {{bindAttr class="highlight:highlight"}} {{action "selectSection" }}>
  <td class="key">
    {{#each zones}}
      <em {{bindAttr style="color"}}>&nbsp;</em>
    {{/each}}
  </td>
  <td class="sect">{{name}}</td>
  <td class="price">{{currency lowPrice}} - {{currency highPrice}}</td>
</tr>
{{/each}}
</table>

像这样绑定动态类效果很好。如果我在控制器中设置 section.highlight == true，则视图将使用适当的类进行更新。

“调用”代码：

zone.section.set('highlight', true);

因为我需要处理每一行的一些其他事件，所以我将整个表格行迁移到嵌套视图。我正在寻找一种使动态类像以前一样工作的方法。

{{#each sections}}
{{#view SYOS.SelectSectionRowView sectionBinding="this" }}
  <td class="key">
    {{#each section.zones}}
      <em {{bindAttr style="color"}}>&nbsp;</em>
    {{/each}}
  </td>
  <td class="sect">{{section.name}}</td>
  <td class="price">{{currency section.lowPrice}} - {{currency section.highPrice}}</td>
{{/view}}
{{/each}}

我认为我不能使用相同的 bindAttr 解决方案，因为它需要应用于 #view 助手。我也试过 classNameBindings & classBinding 无济于事。更新 section.highlight 不再触发此视图以应用动态类。

查看 w/ classNameBindings：

SYOS.SelectSectionRowView = Em.View.extend({

tagName: 'tr',

classNameBindings: ['isHighlighted:highlight'],

isHighlighted: function () {
    return this.section.highlight;
} //also tried .property('section')
});

使用 classBinding 查看：

{{#view SYOS.SelectSectionRowView sectionBinding="this" classBinding="needsHighlight"}}

在视图类中：

needsHighlight: function () {
  if (this.section.highlight) {
return 'highlight';
  }

return '';
} .property('section'),

这些似乎都不起作用。任何人都可以深入了解如何实现这样的场景吗？

非常感谢！

4

1 回答 1

3

尝试 classNameBindings: ['section.highlight:highlight']

于 2012-05-01T16:22:00.487 回答