Come posso impedire che venga chiamata un'azione su un componente principale quando faccio clic su un componente figlio?

Question

Ho la seguente po 'di modello in un progetto su cui sto lavorando:

<div class="item row" {{action "expandItem"}}> 
    {{input type="checkbox" checked=isChecked}} 
    {{item.name}} 
</div> 

Il problema che sto funzionando in è che cliccando sulla casella di controllo non cambia il suo stato. Tuttavia, attiva l'azione expandItem. Mi piacerebbe che il comportamento fosse che cliccando sulla casella di controllo cambia isChecked ma facendo clic in qualsiasi altro punto del div-fire expandItem. Come posso realizzare questo?

MODIFICA: La domanda Stop click propagation from Ember action è molto vicina, ma la differenza, a quanto vedo, è che l'elemento figlio nell'altra domanda sta utilizzando l'helper {{action}}, che può facilmente interrompere la propagazione con bubbles = false. Nel mio caso, non ho necessariamente un gancio su come la componente di input predefinita di Ember bolle l'azione

SECONDA MODIFICA: ho ricreato esattamente il comportamento che sto vedendo in this JSBin. Noterai come il componente di input e l'helper in linea action si comportano diversamente. Spero che questo ti aiuti.

Answer 1

Sono stato incuriosito da questo problema, per quanto vedo non esiste un modo nativo per impedire il bubbling dell'evento da un helper di input.

Ma c'è una soluzione alternativa. Creare un div non visibile che galleggia sopra la casella di controllo, e utilizzare un evento click che seleziona la casella sottostante:

Template:

<div class="item row" {{action "expandItem"}}> 
    <div style="position-absolute; display: inline-block;"> 
    <div {{action "toggleSelect" bubbles=false}} style="position: absolute;left: 0;width: 12px;top: 0;bottom: 0;"></div> 
    {{input type="checkbox" checked=isChecked}} 
    </div> 
    {{item.name}} 
</div> 

azione nel controller/Componente:

actions: { 
    toggleSelect() { 
    this.set('isChecked', !this.get('isChecked')); 
    } 
} 

Answer 2

Da Ember 1.13.3 puoi fare quanto segue (l'esempio non usa l'helper degli input e non lo consiglierei se possibile):

Template:

<label onclick={{action "stopPropagation"}}> 
    <input type="checkbox" checked={{checked}} 
      onchange={{action "check" value="target.checked"}}> 
</label> 

Componente/regolatore:

actions: { 
    check() { 
     this.toggleProperty('checked');  
    }, 
    stopPropagation(event) { 
     event.stopPropagation(); 
    } 
} 

non si può solo fermare l'azione di propagarsi con bubbles=false poiché in questo caso event.preventDefault è chiamato anche disabilitando casella di controllo di default behavour.

Ecco Ember Twiddle