Binding to nested array values in KendoUI TreeView - mvvm

Question

We are evaluating KendoUI web for use in all of our projects and I am running into an issue (or lack of understanding) with the TreeView Widget.
I am trying to use a MVVM TreeView and I am having issues when binding to nested array values from my template. I am dynamically building the tree view, by adding a node and its children with a button click. I want to bind each leaf(child) node to a text value on that node in the MVVM. This seems to work great on the initial load of the tree, but after adding more nodes to the viewModel, the bindings seem to quit working.
This seems to be a lot harder than I feel it should, which makes me think I am missing something.
Can anyone help shed some light on this?
Thanks,
Jason
JSFiddle
I created a JSFiddle example for our use in this discussion: http://jsfiddle.net/jsonsee/9B9pT/
HTML
<script id="treeTemplate" type="text/x-kendo-template">
<span>
#: item.name #
# if (!item.hasChilren) { #
<input type = 'text' data-bind = "value: treeData[#: item.parentIndex #].items[#: item.childIndex #].displayValue"/>
# } #
</span>
</script>
<div id="content">
<div id="form">
<label>Item Name:
<input type="text" data-bind="value: form.itemName" />
</label>
<button data-bind="click: form.onAddItem">Add Item</button>
<div class="console">
<h2>Output:</h2>
<div id="myConsole"/>
</div>
</div>
<h2>TreeView</h2>
<div data-template="treeTemplate" data-role="treeview" data-bind="source: treeData" />
</div>
Javascript
(function ($) {
var viewModel = kendo.observable({
itemIndex: 0,
form: {
itemName: '',
onAddItem: function (e) {
e.preventDefault();
var itemToAdd = {
name: viewModel.get('form.itemName'),
hasChilren: true,
items: (function () {
var children = [];
for (var i = 0; i < 3; i++) {
children.push({
name: viewModel.get('form.itemName') + '-child-' + i,
parentIndex: viewModel.get('itemIndex'),
childIndex: i,
displayValue: '',
hasChilren: false
});
}
return children;
})()
}
if (viewModel.get('treeData')) {
viewModel.get('treeData').push(itemToAdd);
} else {
viewModel.set('treeData', kendo.observableHierarchy([itemToAdd]));
}
viewModel.set('form.itemName', '');
viewModel.set('itemIndex', viewModel.get('itemIndex') + 1);
}
}
});
$(document).ready(function () {
kendo.bind(document.body, viewModel);
viewModel.bind('change', function (e) {
console.log('viewModel changed!');
var output = JSON.stringify(viewModel, undefined, 2);
console.log('----------------------------------------------------');
console.log(output);
console.log('----------------------------------------------------');
$("#myConsole").html("<pre>" + output + "</pre>");
});
});
})(jQuery);
Edit
Addressing a comment:
In my application, I am dragging elements from a tool palette on the left hand side of the page to a center pane. On dropping the item, I build a tree view. Each node has a set of children, those children do not have children. So the tree is one level deep (two if you count the parent).
Each node in the tree view is rendered as such (Starting with the parent)
* parentNode.name
--->* childNode.name [textbox bound to this node's displayValue property in viewModel]
--->* childNode.name [textbox bound to this node's displayValue property in viewModel]
--->* childNode.name [textbox bound to this node's displayValue property in viewModel]
--->* childNode.name [textbox bound to this node's displayValue property in viewModel]
Problem
The part I have a problem with is binding the child nodes text box to the displayValue property of the corresponding viewModel field in the hierarchical dataSource. I have tried many different methods, but the one that "sort-of" works is accessing the array elements directly from the template binding via: data-bind="value: treeData[#: item.parentIndex #].items[#: item.childIndex #].displayValue"
Note that the above binding doesn't work after I add the second node. That is the problem. I agree that the code is complex, that is part of the reason for the question... something seems wrong to me. So, either the kendo MVVM doesn't support direct binding to nested array elements, or I am doing something completely wrong.
Updated Output
I updated the JSFiddle and am posting the output to better illustrate the problem. Notice how the second set of child elements on the viewModel has a blank displayValue property, even after I changed them in the view. The bindings aren't working for some reason after I add the first node.
New JSFiddle: http://jsfiddle.net/jsonsee/9B9pT/
Printout of viewModel
{
"itemIndex": 2,
"form": {
"itemName": ""
},
"treeData": [
{
"name": "a",
"hasChilren": true,
"items": [
{
"name": "a-child-0",
"parentIndex": 0,
"childIndex": 0,
"displayValue": "1",
"hasChilren": false,
"items": [],
"index": 0
},
{
"name": "a-child-1",
"parentIndex": 0,
"childIndex": 1,
"displayValue": "2",
"hasChilren": false,
"items": [],
"index": 1
},
{
"name": "a-child-2",
"parentIndex": 0,
"childIndex": 2,
"displayValue": "3",
"hasChilren": false,
"items": [],
"index": 2
}
],
"index": 0,
"expanded": true
},
{
"name": "b",
"hasChilren": true,
"items": [
{
"name": "b-child-0",
"parentIndex": 1,
"childIndex": 0,
"displayValue": "",
"hasChilren": false,
"index": 0
},
{
"name": "b-child-1",
"parentIndex": 1,
"childIndex": 1,
"displayValue": "",
"hasChilren": false,
"index": 1,
"selected": true
},
{
"name": "b-child-2",
"parentIndex": 1,
"childIndex": 2,
"displayValue": "",
"hasChilren": false,
"index": 2
}
],
"index": 1,
"expanded": true
}
]
}