knockout.js - ingles - qué significa en español

Evento de cambio de casilla knockout envía valor antiguo

Question

Estoy teniendo un problema con el enlace "comprobado" no deseable. Parece que el evento "cambiar" en la casilla de verificación devuelve un valor anterior, antes de que se actualice (por lo que si no se selecciona, devolverá falso). No creo que pueda suscribirme al valor ya que lo tengo dentro del objeto.

<tbody data-bind="foreach: Categories">
<tr>
<td><input type="checkbox" data-bind="checked: ShowOpened, event: { change: $root.CategoryChange }" /></td>
</tr>
</tbody>
<script type="text/javascript">
var Category = function (Id, Name, Order, ShowOpened) {
this.Id = Id;
this.Name = Name;
this.Order = Order;
this.ShowOpened = ShowOpened;
this.IsUpdated = ko.observable(false);
this.OldOrder = Order;
this.OldShowOpened = ShowOpened;
};
var ViewModel = {
Categories: ko.observableArray([]),
CategoryChange: function(pCategory) {
if(pCategory.Order != pCategory.OldOrder || pCategory.ShowOpened != pCategory.OldShowOpened)
pCategory.IsUpdated(true);
else
pCategory.IsUpdated(false);
}
};
ko.applyBindings(ViewModel);
</script>

Entonces, en este ejemplo, tengo la casilla de verificación ShowOpened que puede activar el método CategoryChange que cambiará una variable dentro del objeto (que más adelante necesito saber qué objeto se actualiza). Pero cuando se cambia el cuadro de chequeo, siempre envía el valor anterior, el método de activación, y luego cambia el valor. ¿Hay alguna forma de arreglar esto?

Answer 1

Como insistió en afirmar que la falta de ko.observables no es un problema, la he examinado más de cerca. ¡Parece que estás en lo correcto! El evento de change se dispara antes de que se establezca el valor real. Me temo que no sé el motivo de esto.

Pero hay una manera fácil de arreglar esto: simplemente change evento de change evento click :

<input type="checkbox" data-bind="checked: ShowOpened, click: $root.CategoryChange" />

Recuerde, que tiene que poner explícitamente el return true; al final del controlador de eventos click . De lo contrario, el nuevo valor no se configurará en la casilla de verificación.

Si no desea usar el evento click , puede hacerlo de otra manera. Suscribirse a los cambios de ShowOpened :

this.ShowOpened = ko.observable(ShowOpened);
this.ShowOpened.subscribe(function(newValue) {
/* Do something when ShowOpened changes.
newValue variable holds the new value, obviously. :) */
});

Answer 2

Intente utilizar subscribe lugar de enlace de evento. Esto debería funcionar ahora

<table>
<tbody data-bind="foreach: Categories">
<tr>
<td><input type="checkbox" data-bind="checked: ShowOpened" /></td>
</tr>
</tbody>
<table>
var Category = function (Id, Name, Order, ShowOpened) {
this.Id = Id;
this.Name = Name;
this.Order = Order;
this.ShowOpened = ko.observable(ShowOpened);
this.IsUpdated = false;
this.OldOrder = Order;
this.OldShowOpened = ShowOpened;
this.ShowOpened.subscribe(function (newShowOpened) {
if(this.Order != this.OldOrder || this.ShowOpened() != this.OldShowOpened)
this.IsUpdated = true;
else
this.IsUpdated = false;
}, this);
};
var ViewModel = {
Categories: ko.observableArray([])
};
ko.applyBindings(ViewModel);

O como alternativa (y en mi opinión, una mejor solución) puede usar dependentObservable , ahora llamado computed . Así es como se vería

<table>
<tbody data-bind="foreach: Categories">
<tr>
<td>
<input type="checkbox" data-bind="checked: ShowOpened" />
<span data-bind="text: IsUpdated"></span>
</td>
</tr>
</tbody>
</table>
var Category = function (Id, Name, Order, ShowOpened) {
this.Id = Id;
this.Name = Name;
this.Order = Order;
this.ShowOpened = ko.observable(ShowOpened);
this.OldOrder = Order;
this.OldShowOpened = ShowOpened;
this.IsUpdated = ko.computed(function () {
return this.Order != this.OldOrder || this.ShowOpened() != this.OldShowOpened;
}, this);
};
var ViewModel = {
Categories: ko.observableArray([])
};
ko.applyBindings(ViewModel);

Answer 3

También tuve este problema, pero no pude usar la solución de suscripción porque ya estaba suscrito al mismo campo con una solicitud de ajax que podría restablecer el valor. El código se mantendría en un bucle cuando lo cambiaras. Así que agregué la siguiente solución (es fea pero funciona).

$("input[type=''radio''], input[type=''checkbox'']", element).on("change", function (e, data) {
setTimeout(function () {
$(this).trigger("afterChange", data);
}.bind(this), 10);
});

Luego, en lugar de escuchar el cambio, escucharía el evento afterChange.

<div data-bind="foreach: answerList">
<input type="checkbox" data-bind="event: { afterChange: $root.sendSelectedAnswer($data) }"/>
</div>

Sé que no es la mejor solución, pero en mi caso no tenía otra opción.