我正在使用 RP Niemeyer 的剑道 knockout 库。我正在使用可观察 knockout 中的数据源运行kendoTreeView。
html:
<div id="main">
<div id="reportGrid" data-bind="kendoTreeView: { dataSource: treeViewDataSource }"> </div>
<button data-bind="click: addItem">Add</button>
</div>>
JavaScript:
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);
当我单击添加按钮时,我将向可观察数组添加一个新元素。该项目已添加,但 View 未相应更新。
我正在按照此处的步骤操作:
Kendo-Knockout: use knockout view model with kendo datasource
我做错了什么吗?或者目前不支持此功能?如果是这样,我有什么选择?每次添加/删除/更新节点时,我可能会从 DOM 中删除 TreeView ,然后使用新数据源重新创建它。但我希望绑定(bind)能够工作或者有一些更灵活的解决方案。谢谢!
jsFiddle:
更新:
我还可以使用对小部件的引用来加载 TreeView ,如下所示:
html:
<div data-bind="kendoTreeView: { widget: myWidget}">
</div>
<button data-bind="click: initialize">Initialize</button>
JavaScript:
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());
使用这种方法,我想添加、删除和更新 TreeView 中的项目。我正在考虑诸如操作内联数据源之类的事情,我希望 View 能够相应地更新(类似于我上面原始帖子中的可观察数据源的想法)。我怎样才能做到这一点 ?任何可行的例子都会很棒!
最佳答案
根据documentation ,knockout-kendo TreeView 应添加到最外面的 ul 元素。此外,无需使用 kendo.data.DataSource,只需使用标准 knockout 技术添加额外的嵌套 ul 和 li 元素即可。
更新:添加了添加项目按钮。添加了节点,但没有剑道样式。添加了一个 hack 来重新绑定(bind) knockout 节点。
// Here's my data model
var node = function(title){
this.title = ko.observable(title);
this.children = ko.observableArray();
}
var ViewModel = function() {
this.tvWidget = ko.observable();
this.children = ko.observableArray([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 = function() {
this.children.push(new node('n'));
this.children()[0].children.push(new node('n'));
ko.cleanNode(document.getElementById('treeviewdiv'))
ko.applyBindings(vm, document.getElementById('treeviewdiv'))
};
var vm = new ViewModel();
ko.applyBindings(vm);
<link href="http://rniemeyer.github.io/knockout-kendo/css/kendo.default.min.css" rel="stylesheet"/>
<link href="http://rniemeyer.github.io/knockout-kendo/css/kendo.common.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="http://rniemeyer.github.io/knockout-kendo/js/kendo.all.min.js"></script>
<script src="http://rniemeyer.github.io/knockout-kendo/js/knockout-kendo.min.js"></script>
<div id="treeviewdiv">
<ul data-bind="kendoTreeView: {widget: tvWidget}, template: { name: 'node-template', foreach: children }"></ul>
</div>
<button data-bind="click: addItem">Add item</button>
<script type="text/html" id="node-template">
<li>
<span data-bind="text: title"></span>
<ul data-bind="template: { name: 'node-template', foreach: children }"></ul>
</li>
</script>
关于knockout.js - 剑道击倒 : use knockout view model with kendo datasource to populate kendoTreeView,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14331804/