Is there a standard way to track changes using a knockout page?

Question

I have a rather complicated web page with various tabs, forms, radio buttons, dropdowns, etc. It's all about using Knockout.js with a very complex JavaScript object that was loaded via an AJAX call. Of course, the user can suppress the material to their hearts, after which they will click the "Save" button to save all their changes back to the server.

I am going to come up with a good design to accurately track what has been changed on the page so that I can implement saving. So, I came up with several possible implementations.

Option 1) Just send everything back and let the server figure it out: With this method, I would let Knockout just update the data source. The Save button will call .toJS() and send this data back to the server. Pros: It is very simple and works very little on the client. Cons: The server does not know what has changed, and it needs to either load data from the database for comparison, or simply save all the fields again. These fields come from several tables and have complex relationships. He also considers the entire document as a single atomic unit. If someone changes field A and you change field B, one user will lose their changes.

Option 2) Use JavaScript to compare the source data and the current data: Using this method, when the user clicks the "Save" button, I systematically compare the source data and the current data and generate a schedule of changes. Pros:. This would ideally lead to a compact schedule of exactly what the user changed, and could not even if nothing had changed. Cons: The data that I link is complex. It consists of strings, arrays, objects, arrays of objects, arrays of objects with other objects, etc. Finding changes would be a rather complicated nested loop.

Option 3) Track the changes as they are made in the user interface: I will need to observe the changes as they are and save the delta, as the user interface elements have been changed. The Save button will simply send this change schedule to the server if it has any pending changes. Pros: No need to compare two huge JavaScript objects looking for changes, but still has all the advantages of option 2. Cons: Knockout does not look like a standard way to listen to all changes using a single event handler. I believe that I will have to resort to binding to all elements of the user interface or creating custom bindingHandlers in Knockout to implement real-time change tracking.

My question is:

My question is mainly for Knockout.js experts. Is there a standard approach or recommended recommendations to address this clearly common scenario? Sends all the data, even the ones that haven't changed, the overall design? Or do people implement their own change trackers? Does Knockout provide any structure that eases this requirement?

Update: Found this thing , not sure if this could be useful or if anyone has any feedback.

Answer 1

If the question of enabling / disabling the "Save" button, allowing the user to navigate "from" this page / status, you can check using https://github.com/CodeSeven/kolite

check knockout .dirtyFlag.js

Hope this helps.

Edit: Remember that you must never trust data coming from the UI. The actual comparison and validation ultimately happens in your “controlled” server environment.

Answer 2

What I'm likely to do is take option 2 - the comparison itself can be as simple as a strict JS object and comparing it to the cached version itself.

Several other options are discussed here .

PS Perhaps ko.mapping can help you manage this JS object monster?

Answer 3

I wrote a change tracker extension for the knockout, which Pete Smith greatly expanded ...

Take a look here: https://roysvork.wordpress.com/2014/01/12/tracking-changes-to-complex-viewmodels-with-knockout-js/

It works on the principle of expanding observable to track the initial state and changes made by the user on the client. I think this works very well and can give users real-time information about what they changed. In practice, we actually implement a save panel that displays all pending changes and even allows them to undo individual changes, using all the possibilities of reusing change tracking parameters.

 ko.extenders.trackChange = function (target, track) { if (track) { target.isDirty = ko.observable(false); target.originalValue = target(); target.subscribe(function (newValue) { // use != not !== so numbers will equate naturally target.isDirty(newValue != target.originalValue); }); } return target; };