Ember |特定の要素のCSSクラスを設定する

Question

Emberでいくつかのモデルパラメータをレンダリングしていますが、これはチェックボックスのように動作するはずです。したがって、クリックされた要素のcssクラスは、状態を示すために変更する必要があります（たとえば、アクティブの場合は緑色）。 現在、すべてのレンダリングされた要素は、1つだけがクリックされたときにクラスを変更します。 本当にクリックされた要素のCSSクラスのみを変更できますか？私はこれが世話をすると思った。私のビューテンプレートである

：

{{#each model as |attributes|}} 
    {{#each attributes.identifiers as |identifier| }} 
    <div class="col-element"> 
     <div class="checkelement {{state}}" {{action "includeToExport" identifier}}> 
     <p>{{identifier}}</p> 
     </div> 
    </div> 
    {{/each}} 
{{/each}} 

そのコントローラ内のアクション：あなたの助けのための

.checkelement.activated {background-color:#4CAF50; } 

ありがとう：

includeToExport: function(identifier){ 
var state = this.get('state'); 
if (state == 'activated'){ 
    this.set('state',''); 
    // and do something with identifier 
} 
else { 
    this.set('state', 'activated'); 
    // and do something with identifier 
}}, 

アンCSSいます！

Answer 1

このような各項目に別々の状態を設定する場合は、各識別子を表すコンポーネントを作成し、そこで状態コントロールを移動します。 {{#each}}...{{/each}}のコードをすべて自分のコンポーネントに移動すると考えることができます。これは、各識別子のためのステート制御をカプセル化することができます：

{{#each model as |attributes|}} 
    {{#each attributes.identifiers as |identifier| }} 
    {{my-identifier identifier=identifier 
        includeToExportAction=(action "includeToExport")}} 
    {{/each}} 
{{/each}} 

コンポーネントは、コンポーネント

// templates/components/my-identifier 
<div class="checkelement {{state}}" {{action "setState"}}> 
    <p>{{identifier}}</p> 
</div> 

そして今、あなたのコントローラが必要ではないでしょう用テンプレート

// components/my-identifier 
export default Ember.Component.extend({ 
    // passed in 
    identifier: null, 
    includeToExportAction: null, 

    // local 
    state: '', // <-- here you set the initial value for the state 
    classNames: ['col-element'], 

    actions: { 
    setState() { 
     // state-control is now local to each component 
     // and thus unique for each identifier 
     const state = this.get('state'); 
     if (state == 'activated'){ 
     this.set('state',''); 
     } else { 
     this.set('state', 'activated') 
     } 

     // send the identifier and the updated state to the parent 
     this.get('includeToExportAction')(
     this.get('state'), 
     this.get('identifier') 
    ) 
    } 
    } 
}); 

のようになります。現在my-identifierコンポーネントから渡されているため、includeToExportに状態を設定します。

includeToExport(identifier, state){ 
    if (state == 'activated'){ 
    // do something with identifier 
    } 
    else { 
    // do something with identifier 
    } 
}