ChangeTracking, creating a delta collection on the client side before sending it to server

Question

My app has a nested tree in a viewModel on the client. I have jquery templating on each tree item and it's recursive if it has a treeitemGroup. So the json object sent to client from server looks like this,

MvvmTree
- MvvmTreeItemGroup1
---- MvvmTreeItemGroup11
-------- MvvmTreeItem { Title: MyTitle, IsChecked: true }
-------- MvvmTreeItem ... so forth..
-------- MvvmTreeItem ... so forth..
-------- MvvmTreeItem ... so forth..
---- MvvmTreeItem{ Title: MyTitle2, IsChecked: false }
---- MvvmTreeItem
---- MvvmTreeItem
---- MvvmTreeItem
- MvvmTreeItemGroup2
---- MvvmTreeItemGroup21
-------- MvvmTreeItem
-------- MvvmTreeItem
-------- MvvmTreeItem
-------- MvvmTreeItem
---- MvvmTreeItem
---- MvvmTreeItem
---- MvvmTreeItem
---- MvvmTreeItem

My TreeItemTemplate looks like this,

<script type="text/x-jquery-tmpl" id="mvvmTreeViewGroupTemplate"> 
<li>
    <span data-bind="text: Title" class="mvvmTreeItemStyle"/></br/>

    <ul data-bind='template: { 
                            name: "mvvmTreeViewItemTemplate", 
                            foreach: MvvmTreeItems
                            }'>
    </ul>

     <ul data-bind='template: { 
                            name: "mvvmTreeViewGroupTemplate", 
                            foreach: MvvmTreeItemGroups
                            }'>
    </ul>
</li>
</script>
<script type="text/x-jquery-tmpl" id="mvvmTreeViewItemTemplate"> 
<li>
    <input type="checkbox" data-bind="checked: IsChecked" class="checkboxStyle"/> <span data-bind="text: Title" class="mvvmTreeItemStyle"/> (Id: <span data-bind="text: Id" class="mvvmTreeItemStyle"/>)</br/>
</li>
</script>

Now I need to be able to track the changes to the IsChecked property on each TreeItem, which is bound to each Checkbox. After the user checks a set of TreeItems, a separate button will be clicked, that will need to send the deltas in the form of MvvmTreeItem[] json object array (only changes that happened on the client to the checkbox statuses) to server.

So far my research suggests, I should override the default checked bindingHandler of knockoutjs with my own and handle the event by pushing items in to a client side array, but having difficulty visualizing how to accomplish that.

Any pointers / code samples will be appreciated.

Answer 1

I've made good progress with help from the fine folks over at the Google group for Knockoutjs like @green and @mkidder (thanks guys)

I still see several issues (mentioned in the thread), and hope to find answers.

It won't be clear enough unless you check the JSFiddle

http://jsfiddle.net/VinKamat/M8W3L/