KO可见不与模板工作

使用KO显示/隐藏文件夹，子文件夹和文件，递归UL李名单。当用户点击文件夹时，该文件夹下的子项目将切换隐藏/显示。

问题：

递归部分是确定。但它不会切换。 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>

来源

2017-03-14 ppau2004

它不应该是'数据绑定= “slideVisible：节目，模板：{名称： 'FileElement' 的foreach：$ data.treeRoot}”'？ –

你的顶层结合上下文是树根，而树根没有一个“秀”性质，它只是一个简单的数组，所以你可能要完全删除首秀结合

<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

来源

2017-03-14 16:24:57

谢谢杰森。那效果很好 – ppau2004

KO可见不与模板工作

回答

相关问题