Estoy construyendo una interfaz de usuario mediante KnockoutJs y Twitter Bootstrap.

Estoy usando el checked de unión dentro de un Bootstrap de diálogo llamado 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>

Todo está bien, excepto que me gustaría que el desplegable de diálogo permanece abierto cuando el control de las casillas de verificación.

Aquí es un violín con un ejemplo: http://jsfiddle.net/MikeEast/L3KfG/2/

He intentado crear mi propia unión controlador que utiliza la comprobación de unión explícitamente junto con event.preventDefault() y event.stopPropagation() que deja el diálogo abierto, pero impide que la casilla de verificación para ser revisados.

Alguna sugerencia?

1 Comentario

  1. 47

    Suena como que estábamos en el camino correcto. Básicamente quiero hacer el equivalente de:

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

    O Esto se podría hacer en un enlace personalizado como:

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

    La normal, haga clic en/controlador de eventos conectados por KO va a evitar que la acción predeterminada a menos que se devuelva true. Sin embargo, si queremos conectar nuestro propio controlador de eventos, entonces solo tenemos que prevenir la aparición de burbujas.

    Ejemplo: http://jsfiddle.net/MikeEast/PyNfg/1/

    • Bueno! Inteligente para atrapar las burbujas en el elemento padre! Gracias! Por cierto: he editado el: event.cancelBubble; -> event.cancelBubble = true;
    • uy, sí debe ser true. buena captura.
    • ¿cómo puedo upvote una respuesta más de una vez, usted me salvó la vida.
    • No sé por qué clickBubble: false no funciona, pero la solución personalizada stopBubble: true funciona perfecto, pero en mi caso no de los padres, pero el niño nodo

Dejar respuesta

Please enter your comment!
Please enter your name here