knockout.js - for - Botones de radio Knockoutjs

knockout js for

Question

Tengo 2 valores que obtengo del servidor A y B. Solo puedo tener uno verdadero a la vez.

Una vez más, lo que necesito es que una de las radios se compruebe a la vez, así que solo un valor verdadero.

var viewModel = {
    radioSelectedOptionValue: ko.observable("false"),
    A: ko.observable("false"),
    B: ko.observable("false") 
};
ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js"></script>
<div class=''liveExample''>    
        <h3>Radio View model</h3>
        <table>
        <tr>
            <td class="label">Radio buttons:</td>
            <td>
                <label><input name="Test" type="radio" value="True" data-bind="checked: A" />Alpha</label>
                <label><input name="Test" type="radio" value="True" data-bind="checked: B" />Beta</label>
            </td>
        </tr>
    </table>  
    A-<span data-bind="text: A"></span>
    B-<span data-bind="text: B"></span>
</div>

Answer 1

El enlace checked funciona de manera diferente para los botones de opción y las casillas de verificación:

De la documentation :

Para los botones de opción, KO configurará el elemento a verificar si y solo si el valor del parámetro es igual al atributo de value del nodo del botón de opción. Por lo tanto, el valor de su parámetro debe ser una cadena .

Por lo tanto, debe establecer el atributo de value de sus entradas en "A" y "B" y luego vincularlo al radioSelectedOptionValue que contendrá "A" o "B" según las opciones que se seleccionen:

<label>
    <input name="Test" type="radio" value="A" 
             data-bind="checked: radioSelectedOptionValue" />
    Alpha
</label>
<label>
    <input name="Test" type="radio" value="B" 
             data-bind="checked: radioSelectedOptionValue" />
    Beta
</label>

Si desea mantener sus propiedades booleanas: A y B , debe hacer que ko.computed (solo lectura, escribible) utilice el valor de radioSelectedOptionValue :

this.radioSelectedOptionValue = ko.observable();
this.A = ko.computed( {
        read: function() {
            return this.radioSelectedOptionValue() == "A";
        },
        write: function(value) {
            if (value)
                this.radioSelectedOptionValue("A");
        }
    }, this);

Demo JSFiddle.

Answer 2

Knockout 3.x agregó la opción de vinculación deValor comprobado. Esto le permite especificar valores distintos a las cadenas.

    <input name="Test" type="radio" data-bind="checked: radioSelectedOptionValue, checkedValue: true" />
    <input name="Test" type="radio" data-bind="checked: radioSelectedOptionValue, checkedValue: false" />

http://jsfiddle.net/t73d435v/