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

#view ヘルパーに適用する必要があるため、同じ bindAttr ソリューションを使用できるとは思いません。classNameBindings と classBinding も試しましたが、役に立ちませんでした。section.highlight を更新しても、このビューで動的クラスが適用されなくなりました。

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 に答える