knockout.js - for - Botones de radio Knockoutjs
knockout js for (2)
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
valuedel 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.
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>
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" />