W jaki sposób można zapobiec wywołaniu akcji składnika nadrzędnego po kliknięciu komponentu potomnego?

Question

Mam następujący kawałek szablonu w projekcie pracuję nad:

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

Kłopot biegnę na to, że klikając pole wyboru nie zmienia swój stan. Wywołuje jednak akcję expandItem. Chciałbym, aby zachowanie było takie, że kliknięcie pola wyboru zmienia się isChecked, ale kliknięcie gdziekolwiek indziej w dziale pożarów expandItem. Jak mogę to zrobić?

EDYCJA: Pytanie Stop click propagation from Ember action jest bardzo blisko, ale różnica polega na tym, że element potomny w drugim pytaniu używa helpera {{action}}, który może łatwo zatrzymać propagację za pomocą bąbelków = false. W moim przypadku, niekoniecznie muszę wiedzieć, w jaki sposób domyślny komponent wejściowy Ember'a puszcza akcję. Zauważysz, że komponent wejściowy i wbudowany helper action zachowują się w różny sposób. Mam nadzieję że to pomoże.

Answer 1

Byłem zaintrygowany tym problemem, o ile widzę, nie ma natywnego sposobu, aby zapobiec propagacji zdarzenia z pomocnika wejściowego.

Ale istnieje obejście. Stworzyć niewidoczną div pływającą nad polem wyboru i użyć zdarzenia click, które wybiera podstawową wyboru:

szablon:

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

Akcja kontroler/Component:

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

Answer 2

Od wersji Ember 1.13.3 możesz wykonać następujące czynności (przykład nie korzysta z pomocnika wejścia i nie zaleca się używania go, jeśli to możliwe):

Szablon:

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

Komponent/kontroler:

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

Nie można po prostu zatrzymać akcję z rozmnożeniowego z bubbles=false ponieważ w tym przypadku event.preventDefault nazywany jest również wyłączenie domyślnego checkbox behavour.

Oto Ember Twiddle