Kendo UI

jQuery + Kendo UI + MockJax + Knockout

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script>
<div id="treeview"></div>

JavaScript

// I expect to see a treview like this:
// + baz
// |- bar
// |- new
//
// What I see instead
// + baz
// |- new
// |- new
//
// For some reason it removes the 
// child originally in the array
// and then starts drawing each
// node twice.

var item1 = new kendo.data.Node({
    foo: 'bar'
});
var item2 = new kendo.data.Node({
    foo: 'baz',
    items: new kendo.data.ObservableArray([
        item1
    ])
});

var treeData = new kendo.data.ObservableArray([item2]);

$("#treeview").kendoTreeView({
    dataSource: treeData,
    collapsed: false,
    template: '<div>#= item.get("foo") #</div>'
});

item2.items.push(
    new kendo.data.Node({'foo': 'new'})
);