2013-01-14 13 views
22

Buduję interfejs użytkownika za pomocą KnockoutJs i Twitter Bootstrap.Zapobieganie propagacji zdarzeń podczas używania sprawdzonego powiązania w knockoutjs

Używam wiązania checked w oknie dialogowym Bootstrap o nazwie dropdown-toggle.

<div class="btn-group"> 
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 
     Facets 
     <span class="caret"></span> 
    </a> 
    <ul class="dropdown-menu"> 
     <!-- ko foreach: facets --> 
     <li> 
      <input type="checkbox" data-bind="checked: Visible" /> 
      <span data-bind="text: Name"></span> 
     </li> 
     <!-- /ko --> 
    </ul> 
</div> 

Wszystko jest w porządku, ale chciałbym, aby rozwijane okno dialogowe pozostało otwarte po zaznaczeniu pól wyboru.

Oto skrzypce na przykładzie: http://jsfiddle.net/MikeEast/L3KfG/2/

Próbowałem tworzyć własne wiążącej obsługi, który używa sprawdzonej wiążący wyraźnie wraz z event.preventDefault() i event.stopPropagation() który opuszcza dialog otwarty, ale zapobiega pole do sprawdzenia.

Jakieś wskazówki?

Odpowiedz

42

Wygląda na to, że jesteś na dobrej drodze. Zasadniczo chcesz zrobić równowartość:

click: function() { return true; }, clickBubble: false 

LUB Można to zrobić w zwyczaju wiązania jak:

ko.bindingHandlers.stopBubble = { 
    init: function(element) { 
    ko.utils.registerEventHandler(element, "click", function(event) { 
     event.cancelBubble = true; 
     if (event.stopPropagation) { 
      event.stopPropagation(); 
     } 
    }); 
    } 
}; 

normalnej obsługi click/event załączonym przez KO uniemożliwi domyślną akcję chyba że zwrócisz prawdę. Jednakże, jeśli podłączymy nasz własny program obsługi zdarzeń, musimy jedynie zapobiegać bulgotaniu.

Próbka: http://jsfiddle.net/MikeEast/PyNfg/1/

+0

Nice! Sprytnie złapać bulgotanie w elemencie rodzica! Dzięki! Btw: Edytowałem: 'event.cancelBubble;' -> 'event.cancelBubble = true;' –

+2

oops, tak powinno być "true". dobry połów. –

+0

Jak mogę uzyskać odpowiedź na więcej niż raz, uratowałeś mi życie. –

Powiązane problemy