javascript - observablearray - knockout visible

Cambio de evento de cuadro de entrada de knockout.js-pasa valor antiguo

Question

Al agregar un enlace de evento de cambio a un cuadro de entrada usando knockout.js, el valor anterior se pasa a la función de cambio cuando se dispara el evento. Puedo solucionar esto usando blur. ¿Es este el comportamiento previsto? ¿La idea de usar el evento de cambio tiene el valor anterior y luego usar un selector normal para obtener el valor del dom? Parece contra intuitivo.

Ejemplo jsFiddle

JavaScript
----------
var data = {
    saved_value:"1",
    value_changed: function(data){
        alert(data.saved_value());
    }
};
var viewModel = ko.mapping.fromJS(data);
ko.applyBindings(viewModel);

HTML
----
Current Value:<span data-bind="text:saved_value"></span><br/>
<input data-bind="event:{change:value_changed},value:saved_value"></input>

Answer 1

Actualización: para las versiones más nuevas de knockout, puede reemplazar el enlace de valor con textInput , que maneja muchos casos valueUpdate no cubiertos por valueUpdate .

No, esta no es la forma correcta de hacer las cosas.

Obtiene el valor anterior porque saved_value no se actualiza hasta que el cuadro de texto pierde el foco.

Si desea insertar el nuevo valor a medida que el usuario escribe, utilizando la opción valueUpdate del enlace de entrada:

<input data-bind="event: { change: value_changed }, value: saved_value, valueUpdate: ''afterkeydown''" />

La opción valueUpdate toma un nombre de evento (por ejemplo, ''keyup''). Cuando se desencadena ese evento, su valor_guardado se actualizará.

Ahora déjame proponer una solución alternativa.

Todavía haga el enlace valueUpdate como he mostrado arriba, pero en lugar de escuchar el evento modificado, simplemente suscríbase a lo observable:

<input data-bind="textInput: saved_value" />

Luego en JS:

var viewModel = {
    saved_value: ko.observable("1"),
};
viewModel.saved_value.subscribe(function (newValue) {
   alert(data.saved_value());
});
ko.applyBindings(viewModel);

Answer 2

Intente usar el texto y los enlaces de valor:

Current Value:<span data-bind="text: saved_value"></span><br/>
<input data-bind="value: saved_value"></input>

Y cambie el JavaScript a esto:

var data = {
    saved_value: "1"    
};

var viewModel = ko.mapping.fromJS(data);
ko.applyBindings(viewModel);​

Aquí hay un jsFiddle asociado: http://jsfiddle.net/6zmJs/

Si desea alert() del valor de saved_value cuando se actualiza, puede usar ko.computed o viewModel.saved_value.subscribe(function(value) { alert(value); }); - aunque esas no son las únicas formas de hacer esto.

Answer 3

Pruebe esto en los manejadores de eventos de vinculación de datos, después de los manejadores de valores y no antes:

<input data-bind="value: property, event:{ change: doSomething}" />

Answer 4

Si coloca la opción ''evento'' al final, no necesita la opción ''valueUpdate''. Me gusta esto:

<input data-bind="value: saved_value, event: { change: value_changed }" />

También tenga en cuenta que cuando utiliza suscribirse a un observable, se activa cada vez que cambia su valor. (ya sea por interacción del usuario o por programación).