Este es el trabajo:

view.html

<div><input type="radio" name="radioPriority" data-bind="checked: priority" value="want" style="margin-top: -3px; margin-right: 3px;" />I want to</div>
<div><input type="radio" name="radioPriority" data-bind="checked: priority" value="need"  style="margin-top: -3px; margin-right: 3px;"/>I need to</div>

controller.js

function feedbackViewModel() {
    var self = this;
    self.priority = ko.observable("want");
    //lots of other stuff
}

Como era de esperar, cuando se selecciona la segunda radio la prioridad observable cambia el valor del «necesita». Sin embargo, me gustaría utilizar un Twitter Bootstrap grupo de botones de radio. Aquí está el código HTML que tengo, pero no cambia el observables como se esperaba:

<span class="btn-group" data-toggle="buttons-radio">
    <button data-bind="checked: priority" type="button" class="btn" value="want">I want to</button>
    <button data-bind="checked: priority" type="button" class="btn" value="need">I need to</button>
</span>

actualización tengo un jsfiddle aquí: http://jsfiddle.net/a8wa8/6/ «priority1» es el estándar de radio selecciona y «priority2» es el bootstrap botones.

OriginalEl autor Scott Beeson | 2013-04-03

2 Comentarios

  1. 9

    El problema es que usted está utilizando Checked de enlace con el botón que no está permitido, en lugar usted puede utilizar haga clic en enlace. compruebe este violín:

    http://jsfiddle.net/a8wa8/7/

    Actualizado:

    Sí, usted puede lograr esto mediante el uso de ko css binding. Marque esta actualizado violín:

    Actualizada el Violín

    Esto funciona bien excepto que cuando me cambio el modelo es la no actualización de la vista. es decir, la configuración de priority2(‘quiero’) pragmáticamente no seleccione el botón apropiado. Es esto factible?
    por favor revise mi respuesta actualizada y quiero saber ¿es esto lo que quieres ?
    Perfecto! Gracias
    usted es bienvenido 🙂
    Es posible mover el data-bind atributo del contenido a un archivo js? Si es posible, ¿cómo lo veo?

    OriginalEl autor Gaurav

  2. 6

    La comprueba unión sólo funciona con «seleccionable» controles como la casilla de verificación (<input type='checkbox'>) o un botón de radio (<input type='radio'>).

    Pero tiene button en el segundo ejemplo, donde bootstrap sólo emula el aspecto de el grupo de botones de radio para la checked enlace no funciona.

    Sin embargo, usted puede utilizar el haga clic en enlace donde se pasa el valor a su observables:

    <span class="btn-group" data-toggle="buttons-radio">
         <button data-bind="click: function() { priority2('want') }" 
                 type="button" class="btn" value="want">I want to</button>
         <button data-bind="click: function() { priority2('need') }" 
                 type="button" class="btn" value="need">I need to</button>    
    </span>

    Y puede ocultar esta detrás de un enlace personalizado:

    ko.bindingHandlers.valueClick = {
        init: function(element, valueAccessor, allBindingsAccessor, 
                      viewModel, bindingContext) {     
            var value = valueAccessor();
            var newValueAccessor = function() {
                return function() {
                    value(element.value); 
                };
            };
            ko.bindingHandlers.click.init(element, newValueAccessor, 
                allBindingsAccessor, viewModel, bindingContext);
        },
    }

    A continuación, se puede utilizar como:

    <span class="btn-group" data-toggle="buttons-radio">
         <button data-bind="valueClick: priority2" 
                 type="button" class="btn" value="want">I want to</button>
         <button data-bind="valueClick: priority2" 
                 type="button" class="btn" value="need">I need to</button>    
    </span>

    Demo JSFiddle.

    Esto también funciona, aunque es mucho más complejo de lo que gaurav la respuesta, pero tiene el mismo problema. No es un camino de doble enlace. Si me puse prioridad(‘quiero’) y priority2(‘quiero’) verás que la radio se selecciona automáticamente, pero el proceso de arranque botón no está.
    Si usted también desea tener dos vías de enlace, a continuación, es necesario combinar la click con el css de unión. Mi valueClick personalizado bindinghandler puede ser extendida para manejar este caso también. Al principio puede parecer complicado, pero es mucho más fácil de mantener solución. Porque en su respuesta, tendrá que repetir el «querer» y «necesitar» 3 veces y «priority2» 2 veces en los botones. En el otro lado con un enlace personalizado que usted necesita para escribir todo de una vez.
    Duuuuude sus soluciones es perfecto para lo que necesita. Gracias, voy a necesitar extender valueClick‘s de la funcionalidad para controlar las dos vías de enlace, como usted lo dijo, pero hasta el momento es perfecto.
    Su ejemplo me ha ayudado en dos maneras; se resuelve el mismo grupo de botones de problema y me mostró que no es necesaria una ‘toggle’ función en el modelo de vista. Debido a las características observables son las funciones que usted puede simplemente pasar un nuevo valor en el enlace haga clic en eventos. Saludos.

    OriginalEl autor nemesv

Dejar respuesta

Please enter your comment!
Please enter your name here