#each - how？のネストされた子ビューの動的クラスバインディング

Question

私はこれに似た各ヘルパーを持つ単一のビューを持っていた：

<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/W

ビュー：classBindingと

SYOS.SelectSectionRowView = Em.View.extend({ 

tagName: 'tr', 

classNameBindings: ['isHighlighted:highlight'], 

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

ビュー：ビュークラスで

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

：

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

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

どちらもこれらのは、トリックを行うようです。誰かがこのようなシナリオをどうやって得られるかについての洞察を貸してくれるでしょうか？

ありがとうございます！

Answer 1

try classNameBindings：['section.highlight：highlight']