I have an ObservableArray
collection which binds to the HTML table with bulk edit option (MVC3), every time the user hits commit I wanted to send only the modified rows from the collection instead of sending entire viewmodel list, please advise if any best way to track or filter only the modified rows.
Here is a post about creating a dirty flag in Knockout that will track changes to all observables in an object.
Typically, you would add a dirty flag to each item in your array in a constructor function or loop through each item and add the flag. Then, you can create a computed observable to represent just the changed items for sending back to the server.
Here is a sample that shows a dirty flag on each item and a computed observable that contains only the dirty items: http://jsfiddle.net/rniemeyer/wauwn/
It it not so trivial task as it may looks like.
At first, observable array only handles modification of array (insert, remove, reorder etc.) not modification of element.
At second, you would probably need special flag like 'isModified' in your model that binds to each table row.
Then you need to set that flag if some of the binding was updated. Knockoutjs observables provides method subscribe that allows to call your own function when observables is updated. Take a look at page http://knockoutjs.com/documentation/observables.html at the bottom there is a section called 'explicitly subscribe to observables'.
There is a quick draft of code that performs that task
function CreateArrayElementViewModel(inputData) {
// Creating our view model
var result = {
prop : ko.observable(inputData.prop),
val : ko.observable(inputData.val),
isModified: false // This property would be true if entity was edited
};
// Iterate over all properties and subscribe to knockoutjs observables
for(prop in result) {
if (typeof(result[prop].subscribe) != 'undefined') {
result[prop].subscribe(function() { result.isModified = true; });
}
}
return result;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With