0

我想构建一个像 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);
4

1 回答 1

1

这是一个工作示例：http: //jsfiddle.net/G5XJe/

我对您的代码所做的更改

<li> 
    <ins class = "item-icon"> </ins>
    <a href="#" data-bind="text: data, click: $root.expandBranch"></a >
    <!-- ko template: { name: 'ULTemplate', foreach: leaf } -->
    <!-- /ko -->
</li>

然后是 JavaScript。我从一开始就添加了叶属性并将其设置为可观察数组，这允许添加更多项目并允许它通知更改的淘汰。

var self = this;
self.tree = ko.observableArray([{
    "data": "C:/",
    "leaf": ko.observableArray([])
}]);
self.expandBranch = function (item) {
    /* add leaf to clicked item -> observable does not react */

    item['leaf'].push({
        "data": "Documents",
        "leaf": ko.observableArray([])
    });
    item['leaf'].push({
        "data": "Photos",
        "leaf": ko.observableArray([])
    });
    item['leaf'].push({
        "data": "Videos",
        "leaf": ko.observableArray([])
    });
}

更新：

看看这个，我添加了一个属性，只允许一个项目被点击一次：http: //jsfiddle.net/G5XJe/1/

于 2013-10-30T15:47:50.333 回答