我想构建一个像 jsTree 这样的 Treeview。每次用户单击列表中的项目时,都应该添加一个显示所有包含文件的叶子:
我的 ViewModel 属性 self.tree 有一个包含所有文件夹和子文件夹的数组。当我想添加一个叶子(单击文件夹)时,我的属性 self.tree 中的结构是正确的,但 observerbleArray 似乎对我的操作没有反应。
这是我的视图模型:
function TreeviewViewModel()
{
var self = this;
self.tree = ko.observableArray([
{
"data" : "C:/"
}
]);
self.expandBranch = function (item)
{
/* add leaf to clicked item -> observable does not react */
item['leaf'] = [
{ "data" : "Documents" },
{ "data" : "Photos" },
{ "data" : "Videos" }
];
}
console.log(self.tree());
}
console.log(self.tree());
证明,我的财产包含self.tree
叶子。但是我的视图没有显示它。
我的观点:
<script type="text/html" id="ULTemplate">
<ul>
<li>
<ins class="item-icon" data-bind="click: $root.expandBranch"></ins>
<a href="#" data-bind="text: data"></a>
<!-- ko if: $data.hasOwnProperty("leaf") -->
<!-- ko template: { name: 'ULTemplate', foreach: leaf } -->
<!-- /ko -->
<!-- /ko -->
</li>
</ul>
</script>
<div id="treeview" data-bind="template: { name: 'ULTemplate', foreach: tree }">
</div>
我知道,我的观点是正确的。它用一个假人对其进行了测试:
dummy = [{
"data": "C:/",
"leaf": [
{ "data": "Documents" },
{ "data": "Photos" },
{ "data": "Videos" }
]
}];
self.tree(dummy);