Backend de actualización instantánea con knockoutjs

Question

Estoy tratando de crear una página web con el formulario que una vez que el usuario cambia cualquier campo, la validación y actualización de la confirmación de inmediato en lugar de dejar que el usuario haga clic en el botón Enviar. Estoy usando knockout.js y complemento de mapeo. Sé que puedo lograr esto creando un campo calculado para cada campos originales, pero este tipo de trabajo es Tedio y tonto, ¿hay buenas prácticas para crear un oyente general para escuchar cualquier cambio en cualquier campo y actualizar el backend respectivamente?

Answer 1

Para suscribirse a cualquier cambio, puede usar el método ko.tojs (). En realidad, permite caminar a través del gráfico de objetos y desenvolver los observables. Como probablemente sepa, cuando usa KO.computed, se suscribe a todas las lecturas de campos observables y reevalúa en cada cambio. Entonces, si usa un código como este:

ko.computed(function() {
   ko.toJS(viewModel);
   // update data on server
});

También debe prestar atención a que este código actualizará los datos en el servidor justo después de la inicialización. Se podría evitar fácilmente. Por favor, consulte este ejemplo: http://jsfiddle.net/uaxxa/embedded/result/

También creo que es posible que desee enviar solo datos cambiados a servidor. Podrías incorporar el complemento Ko.Editbales ( https://github.com/romanych/ko.editables ) y algunos conocimientos de Ko Under-Hood. Por favor, consulte esta muestra: http://jsfiddle.net/romanych/rkn5k/

Espero que pueda ayudarte.

Answer 2

Tienes varias opciones, pero si quieres un solo oyente, una buena manera es usar el mismo código que usé para crear un rastreador de cambio. Simplemente escucha los cambios observables. Se trata de 19 líneas de código. Puede obtener esto y en lugar de usarlo para el seguimiento de cambios, solo cablee en un método que guarde los cambios cuando ocurren.

• Nuget http://nuget.org/packages/knockout.changetracker
• Codeplex http://kochangetracker.codeplex.com/

Para configurar el seguimiento del cambio, agregue esta propiedad de rastreador a su modelo de vista:

viewModel.tracker = new ChangeTracker(viewModel); 

Enganche estos a su vista para determinar cuándo ocurren cambios:

viewModel.tracker().somethingHasChanged(); 

Enganche esto a su modelo de vista cuando desee restablecer el estado en las funciones (ex: cargar, guardar):

viewModel.tracker().markCurrentStateAsClean; 

Opcionalmente, también puede aprobar su propio hashfunction para el seguimiento de estado.