Эмбер | set css класс определенного элемента

Question

Я отрисовка некоторых параметров модели в Ember, которые должны вести себя как флажок. Поэтому класс css щелкнутого элемента должен измениться, чтобы указать состояние (например, зеленый, когда активен). В настоящее время все визуализированные элементы меняют свой класс, когда только один щелкнул. Как я могу изменить только класс 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}} 

Это действие в контроллере:

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:

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

Спасибо за вашу помощь!

Answer 1

Если вы хотите иметь отдельное состояние для каждого элемента, подобного этому, одним из вариантов является создание компонента, который будет представлять каждый идентификатор и перемещать там элемент управления состоянием. Вы можете думать об этом как о перемещении всего кода, который у вас есть между {{#each}}...{{/each}}, в его собственный компонент. Это позволит вам инкапсулировать государственный контроль за каждым идентификатором:

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

компонент будет выглядеть что-то вроде

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

Шаблон для компонента

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

И теперь ваш контроллер не потребуется установить любое состояние в includeToExport, поскольку теперь оно передается от компонента my-identifier:

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