Knockout.js 剑道击出：使用具有剑道数据源的击出视图模型来填充剑道击出视图

我正在使用RP Niemeyer的剑道淘汰库。我在knockout observable中使用dataSource运行kendoTreeView

html:

当我单击add按钮时，我正在向observable数组添加一个新元素。项目已添加，但视图未相应更新

我将从这里开始执行以下步骤：

我做错什么了吗？或者当前不支持此功能？如果是，我有什么选择？每次添加/删除/更新节点时，我可能会从DOM中删除treeview，然后使用新的数据源重新创建它。但我希望绑定能起作用，或者有更灵活的解决方案。谢谢

jsFiddle：

更新：

我还可以使用对小部件的引用加载treeView，如下所示：

html:

使用这种方法，我想在树视图中添加、删除和更新项目。我在想一些事情，比如操纵

内联
数据源，我希望视图会相应地更新（类似于我在上面的原始帖子中提出的可观察数据源的想法）。我该怎么做？任何工作的例子都将是伟大的
 根据，击倒剑道树视图应该添加到最外层的ul元素中。另外，不使用kendo.data.DataSource，只需使用标准的淘汰技术添加额外的嵌套ul和li元素

更新：添加了一个添加项按钮。添加了节点，但没有剑道样式。添加了一个hack来重新绑定淘汰节点


//这是我的数据模型
变量节点=函数（标题）{
this.title=ko.可观察（title）；
this.children=ko.observearray（）；
}
var ViewModel=函数（）{
this.tvWidget=ko.observable（）；
this.children=ko.observearray（[new node（'a'）、new node（'b'）、new node（'c'）]）；
this.children（）[0].children（[new node（'d'）、new node（'e'）、new node（'f'）]）；
this.children（）[0].children（）[1].children（[new node（'d'）、new node（'e'）、new node（'f'）]）；
this.children（）[2].children（[new node（'d'）、new node（'e'）、new node（'f'）]）；
};
ViewModel.prototype.addItem=函数（）{
this.children.push（新节点（'n'））；
this.children（）[0].children.push（新节点（'n'））；
ko.cleanNode（document.getElementById（'treeviewdiv'））
ko.applyBindings（vm，document.getElementById（'treeviewdiv'））
};
var vm=new ViewModel（）；
ko.应用绑定（vm）


添加项




<div id="main">
    <div id="reportGrid" data-bind="kendoTreeView: { dataSource: treeViewDataSource }">      </div>
  <button data-bind="click: addItem">Add</button>
</div>>

var billingReportViewModel = ko.observable({
    treeViewDataSource: ko.observableArray([{text: "Tea" },{ text: "Coffee" }]),
    addItem : function () {
    this.treeViewDataSource.push({text: "Water"});
    alert(this.treeViewDataSource().length);
    }

});

ko.applyBindings(billingReportViewModel);

<div data-bind="kendoTreeView: { widget: myWidget}">

</div>

<button data-bind="click: initialize">Initialize</button>

var ViewModel = function () {

    this.initialize = function () {

        var inline = new kendo.data.DataSource({
            data: [
            { id: 1, text: "Tea", sprite: "icon-tea" },
            { id: 2, text: "Coffee", sprite: "icon-coffee" }
        ]
        });

        var widget = this.myWidget();
        widget.setDataSource(inline);
    };

    //hold the widget
    this.myWidget = ko.observable();
};

ko.applyBindings(new ViewModel());