Мгновенное обновление бэкэнда с помощью Knockoutjs

Question

Я пытаюсь создать веб-страницу с формой, которая после того, как пользователь изменит любое поле, проверит проверку и обновление, а не позволит пользователю нажать кнопку отправки. Я использую Knockout.js и картографический плагин. Я знаю, что могу достичь этого, создав вычисленное поле для каждого исходного поля, но такая работа является tedius и немой, есть ли хорошая практика для создания общего слушателя для прослушивания любых изменений в любых полях и обновления бэкэнда соответственно?

Answer 1

Чтобы подписаться на любые изменения, вы можете использовать метод ko.toJS(). Фактически это позволяет пройти через объектный граф и разворачивать наблюдаемые. Как известно, когда вы используете ko.computed, он подписывается на все чтения полей наблюдаемых данных и переоценивает их при каждом изменении. Так что если вы используете такой код:

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

Также следует обратить внимание, что этот кусок кода будет обновлять данные на сервере сразу после инициализации. Его можно было бы легко избежать. Пожалуйста, ознакомьтесь с этим примером: http://jsfiddle.net/UAxXa/embedded/result/

Также, я думаю, вы можете отправить только измененные данные на сервер. Вы можете включить плагин ko.editbales (https://github.com/romanych/ko.editables) и некоторые знания KO under-hood. Пожалуйста, проверьте этот образец: http://jsfiddle.net/romanych/RKn5k/

Надеюсь, это может вам помочь.

Answer 2

У вас есть несколько вариантов, но если вы хотите одного слушателя, один хороший способ - использовать тот же код, который я использовал для создания трекера изменений. Он просто слушает наблюдаемые изменения. Его около 19 строк кода. Вы можете захватить это и вместо того, чтобы использовать его для отслеживания изменений, просто подключите метод, который сохраняет изменения, когда они происходят.

• NuGet http://nuget.org/packages/Knockout.ChangeTracker
• Codeplex http://kochangetracker.codeplex.com/

Для отслеживания изменений настройки, добавить это свойство трекер для вашей модели представления:

viewModel.tracker = new ChangeTracker(viewModel); 

Крюк их в ваш взгляд, чтобы определить, когда происходят изменения :

viewModel.tracker().somethingHasChanged(); 

Крюк это в вашей модели представления, когда вы хотите сбросить состояние функций (например: загрузка, сохранение):

viewModel.tracker().markCurrentStateAsClean; 

При желании, вы можете передать свой собственный хэш-функцию для отслеживания состояния тоже.