[英]KO visible not working with template
Goal: 目标:
use KO to show/hide folder, sub-folder, and files, as recursive UL LI list. 使用KO显示/隐藏文件夹,子文件夹和文件,作为递归UL LI列表。 When a user click on the folders, the child items under that folder will toggle hide/show.
当用户单击文件夹时,该文件夹下的子项将切换隐藏/显示。
Problem: 问题:
The recursive part is ok. 递归部分可以。 But it does not do toggle.
但它不会切换。 console.log says error that 'show' is undefined.
console.log说“显示”未定义的错误。 Any idea what went wrong ?
知道发生了什么问题吗?
Code 码
<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>
Your top level binding context is the treeRoot, and treeRoot doesn't have a "show" property it's just a simple array so you probably want to remove that first show binding altogether 您的顶级绑定上下文是treeRoot,并且treeRoot没有“ show”属性,它只是一个简单的数组,因此您可能希望完全删除第一个show绑定。
<div id="resources-panel" data-bind="template: { name: 'FileElement', foreach: $data.treeRoot }"></div>
Then within the FileElement template you'll want to move the show binding to the outside of the template binding like f_martinez suggested 然后在FileElement模板中,您需要将show绑定移到模板绑定的外部,如f_martinez建议
<ul data-bind="slideVisible: show, template: { name: 'FileElement', foreach: ppp_children }" ></ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.