KOを可視テンプレート

Question

ゴールで作業していない：再帰UL LIリストとして、/非表示のフォルダ、サブフォルダ、およびファイルを表示する

使用KO。ユーザーがフォルダをクリックすると、そのフォルダの下にある子アイテムが非表示/表示を切り替えます。

問題：

再帰部分はokです。しかし、それはトグルをしません。 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はそれだけで単純な配列です「ショー」プロパティを持っていません

<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