Knockout.js 为什么´；向ViewModel中的属性添加项后，是否可以实现视图？

我想构建一个类似jsTree的树视图。每当用户浏览列表中的项目时，应添加一个显示所有包含文件的叶子：

我的ViewModel属性self.tree有一个包含所有文件夹和子文件夹的数组。当我想添加一个叶子（点击文件夹）时，我的属性self.tree中的结构是正确的，但是observer数组似乎对我的操作没有反应

这是我的ViewModel：

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>

---

以下是一个工作示例：

我对您的代码所做的更改

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

更新：

---

看看这个，我添加了一个属性，只允许单击一次项目：

请提供一个。是的，就是这样。谢谢

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

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([])
    });
}