我们正在评估KendoUI web以用于我们的所有项目，并且我遇到了TreeView Widget的问题（或缺乏理解）。
我正在尝试使用MVVM TreeView，当我从模板绑定到嵌套数组值时遇到问题。我通过添加一个节点及其子节点单击按钮来动态构建树视图。我想将每个叶子（子）节点绑定到MVVM中该节点上的文本值。这似乎对树的初始加载很有效，但是在向viewModel添加更多节点之后，绑定似乎已停止工作。
这似乎比我认为的要困难得多，这让我觉得我错过了一些东西。
任何人都可以帮忙解释一下吗？
谢谢，
杰森
我在本次讨论中创建了一个JSFiddle示例：http://jsfiddle.net/jsonsee/9B9pT/
<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>
(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);
发表评论：
在我的应用程序中，我将元素从页面左侧的工具选项板拖动到中心窗格。在删除项目时，我构建了一个树视图。每个节点都有一组孩子，那些孩子没有孩子。所以树是一层深的（如果算上父级，则为两层）。
树视图中的每个节点都是这样呈现的（从父节点开始）
* 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]
我遇到问题的部分是将子节点文本框绑定到分层dataSource中相应viewModel字段的displayValue属性。我尝试了很多不同的方法，但是“sort-of”工作的方法是直接从模板绑定访问数组元素：data-bind =“value：treeData [＃：item.parentIndex＃]。items [＃： item.childIndex＃]。displayValue“
请注意，添加第二个节点后，上述绑定不起作用。那就是问题所在。我同意代码很复杂，这是问题原因的一部分......我觉得有些不对劲。因此，要么剑道MVVM不支持直接绑定到嵌套数组元素，要么我做错了。
我更新了JSFiddle并发布了输出以更好地说明问题。注意viewModel上的第二组子元素如何具有空白的displayValue属性，即使我在视图中更改了它们。添加第一个节点后，绑定因某些原因无效。
新JSFiddle：http://jsfiddle.net/jsonsee/9B9pT/
{
"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
}
]
}