KO 可见不使用模板

Question

目标：

使用 KO 到 show/hide 文件夹、子文件夹和文件，作为递归 UL LI 列表。当用户单击文件夹时，该文件夹下的子项将切换 hide/show.

问题：

递归部分没问题。但它不做切换。 console.log 表示 'show' 未定义的错误。知道哪里出了问题吗？

代码

<script type="text/javascript">

$(function() {
    ko.applyBindings(viewModel,document.getElementById('resources-panel'));
});

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

var FileElement = function(ppp_name, ppp_type, ppp_children) {
   var self = this;

   self.ppp_children = ko.observableArray(ppp_children);
   self.ppp_name = ko.observable(ppp_name);
   self.ppp_type = ko.observable(ppp_type);

   self.show = ko.observable(false);

    self.toggle=function() {
        self.show(!self.show());
    }

  }


var tree = [
    new FileElement("IT Dept", "folder",[
        new FileElement("IT Overview.docx", "file",[]),
        new FileElement("IT Server1", "folder",[
            new FileElement("IT Server1 Configuration Part 1.docx", "file", []),
            new FileElement("IT Server1 Configuration Part 2.docx", "file", []),
            ]),
        new FileElement("IT Server2", "folder",[])
        ]), 
    new FileElement("HR Dept", "folder", [])        
];

    viewModel.treeRoot(tree);

</script>

<script id="FileElement" type="text/html">
    <ul>
        <li>
            <a href="#" data-bind="click: toggle" class="action-link"><br/>
                <span data-bind="text: ppp_name"></span>
            </a>

        <ul data-bind="template: { name: 'FileElement', slideVisible: show, foreach: ppp_children }" ></ul>

        </li>
    </ul>
</script>    

<div id="resources-panel" data-bind="template: { name: 'FileElement', slideVisible: show, foreach: $data.treeRoot }"></div>

Answer 1

您的顶级绑定上下文是 treeRoot，而 treeRoot 没有 "show" 属性它只是一个简单的数组，因此您可能想要完全删除第一个显示绑定

<div id="resources-panel" data-bind="template: { name: 'FileElement', foreach: $data.treeRoot }"></div>

然后在 FileElement 模板中，您需要将显示绑定移动到模板绑定的外部，如 f_martinez 建议的那样

<ul data-bind="slideVisible: show, template: { name: 'FileElement', foreach: ppp_children }" ></ul>

举个例子jsFiddle

KO 可见不使用模板

KO visible not working with template

javascript

recursion

jquery

visibility

knockout.js