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>
<div id="listview"></div>

JavaScript

// Double clicking to expand/collapse the
// 'bar' node changes the node's level from
// the correct value to 0.
// This is because the listview has the
// nodes wrapped in an ObservableArray.
// How should I be sharing nodes
// between the two?

var item1 = new kendo.data.Node({
    foo: 'foo'
});
var item2 = new kendo.data.Node({
    foo: 'bar'
});
var item3 = new kendo.data.Node({
    foo: 'baz'
});

$("#listview").kendoListView({
    dataSource: [item1, item2, item3],
    template: '<div>#= data.get("foo") # lvl:#= data.level() #</div>'
});

item1.append(item2);
item2.append(item3);

var treeview = $("#treeview").kendoTreeView({
    dataSource: [item1],
    template: '<div>#= item.get("foo") # lvl:#= item.level() #</div>'
}).data('kendoTreeView');

treeview.expand('.k-item');