Passa un riferimento dell'elemento DOM cliccato al gestore di azioni in Ember

Question

Ho un set di pulsanti il ​​cui stato desidero passare a una classe active. Se avessi un solo pulsante, quindi vorrei associare la classe active a una proprietà controller e alternare la proprietà nel gestore clic:

<button {{action 'toggle'}} class="{{active}}">model.title</button> 

actions: { 
    toggle: function() { 
    this.set('active', true); 
    } 
} 

Ma ho più pulsanti, quindi non sono sicuro di quello che posso legare. Sarebbe utile se potessi passare un riferimento al pulsante cliccato al gestore di azioni, ma non sono sicuro di come farlo.

{{#each item in model}} 
    <button {{action 'toggle' referenceToButton}}>model.title</button> 
{{/each}} 

actions: { 
    toggle: function(buttonReference) { 
    // add `active` class to buttonReference 
    } 
} 

Qual è il modo migliore per realizzare questo?

Answer 1

L'elemento del modello non è ciò che si desidera passare e non il pulsante?

Quindi il commutatore può semplicemente impostare un attributo sull'elemento che si bind to your button class.

{{#each item in model}} 
    <button {{bind-attr class="item.isActive:active"}} {{action 'toggle' item}}>model.title</button> 
{{/each}} 

actions: { 
    toggle: function(item) { 
    item.set('isActive', true); 
    } 
} 

Answer 2

Anche se il poster ottenuto la risposta che voleva, ho pensato di postare una risposta a quello che credo era l'intenzione della domanda iniziale:

Come ottenere un riferimento al fatto clic DOM elemento da un'azione? da quando sono venuto qui cercando una risposta a questa domanda e non l'ho trovato.

non riesco a trovare un modo per ottenere l'elemento effettivo, ma è possibile ottenere l'elemento vista root (che avvolge gli elementi definiti nel modello) tramite this:

modello:

<button {{action 'toggle' this}}>model.title</button>

controllore, vista, componente:

actions: { 
    toggle: function(event) { 
    // Get element (as in the return value of document.getElementById(id)) 
    var viewElements = event.element; 
    var elementsInTemplate = viewElements.children; 
    var button = viewElements.getElementsByTagName('button'); 
    //also can use getElementsByClassName, use jQuery etc. 
    } 
} 

Answer 3

Solo un altro risposta ...

se si mette l'azione nel onclick (o qualsiasi altro evento Dom) si otterrà l ' "evento" javascript oggetto nell'ultimo parametro (in modo da poter utilizzare event.target per ottenere e manipolare l'oggetto)

template:

<button onclick={{action 'toggle' model.title}}>model.title</button> 

percorso o il controller:

actions: { 
    toggle (title, event) { 
    // TODO: use title 
    let element = Ember.$(event.target); 
    element.toggleClass("active"); 

    return false; 
    } 
} 

Speranza che aiuta

Answer 4

è possibile in durre active proprietà items

{{#each item as |model|}} 
    <button {{action 'toggle' model}} class={{if model.active 'active'}}>{{model.title}}</button> 
{{/each}} 

se active=true poi active classe sarà applicata a pulsante.

actions: { 
    toggle: function(buttonReference) { 
    buttonReference.set('active', true); 
    } 
} 

Per rispondere alla domanda titolo Pass a reference of the clicked DOM element to the action handler in Ember.

1.Se si sta utilizzando un componente, è possibile definire qualsiasi di questo componente nel componente list of event names e progettato per ricevere l'oggetto originale event. ad es., {{my-button model=model}}

export default Ember.Component.extend({ 
click(event){ 
    //oncliking on this componen will trigger this function 
    return true; //to bubble this event up 
} 
}) 

2. Se si sta utilizzando tag HTML come button allora avete bisogno di assegnare un'azione (chiusura) per un gestore di eventi in linea.

{{#each item as |model|}} 
     <button onclick={{action 'toggle' model}}>{{model.title}}</button> 
{{/each}} 

Nelle azioni eseguire l'hashing toggle funzione riceverà sempre browser nativo event oggetto come ultimo argomento.

actions:{ 
toggle(model,event){ 

} 
} 

In questo formato <button {{action 'toggle' model}}>{{model.title}}</button>, azione toggle non riceveranno event oggetto,

Explained davvero bene in guida brace https://guides.emberjs.com/v2.12.0/components/handling-events/#toc_sending-actions