javascript - 使用 knockoutjs 分层 ul 列表崩溃

Question

我想点击 ul li 元素并折叠并打开它们。工作代码是 here

var viewModel = {
    treeRoot: ko.observableArray()
};

var TreeElement = function(name, children) {
   var self = this;
   self.children = ko.observableArray(children);
   self.name = ko.observable(name);
}

var tree = [
    new TreeElement("Russia", [
        new TreeElement("Moscow")
    ]),
    new TreeElement("Germany"),
    new TreeElement("United States", 
        [ 
            new TreeElement("Atlanta"),
            new TreeElement("New York", [ 
                new TreeElement("Harlem"),
                new TreeElement("Central Park")
            ]) 
        ]),
    new TreeElement("Canada", [
        new TreeElement("Toronto")
    ])
];

viewModel.treeRoot(tree);

ko.applyBindings(viewModel);

像这样的html

<script id="treeElement" type="text/html">
    <li>
        <span data-bind="text: name"></span>
        <ul data-bind="template: { name: 'treeElement', foreach: children }">
        </ul>
     </li>
</script>    

 <ul data-bind="template: { name: 'treeElement', foreach: $data.treeRoot }"></ul>

Answer 1

您需要在 TreeElement 上引入一个标志 isCollapsed，您可以从 click 绑定(bind)事件处理程序中切换它。

并且基于 isCollapsed，您需要借助计算的可观察对象过滤掉您的 children 集合:

var TreeElement = function(name, children) {
   var self = this;
   self.children = ko.observableArray(children);
   self.isCollapsed = ko.observable();
   self.collapse = function() {
       self.isCollapsed(!self.isCollapsed());
   }
   self.visibleChildren = ko.computed(function(){
       if (self.isCollapsed())
           return [];
       return children;
   });
   self.name = ko.observable(name);
}

并且您需要使用 click 绑定(bind)处理程序更新模板并使用 visibleChildren 而不是 children 集合:

<script id="treeElement" type="text/html">
  <li>
     <span data-bind="text: name, click: collapse"></span>
     <ul data-bind="template: { name: 'treeElement', foreach: visibleChildren }">
     </ul>
  </li>
</script> 

演示 JSFiddle .