KO visible ne fonctionne pas avec le modèle

Question

Objectif:

utilisation KO pour afficher/dossier cacher, sous-dossier et fichiers, liste récursive UL LI. Lorsqu'un utilisateur clique sur les dossiers, les éléments enfants situés sous ce dossier basculent en mode masquer/afficher.

Problème:

La partie récurrente est ok. Mais ça ne marche pas. console.log indique que l'erreur 'show' n'est pas définie. Une idée de ce qui a mal tourné?

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> 

Answer 1

Votre top contexte de liaison de niveau est le treeRoot et treeRoot ne dispose pas d'une propriété « show » il est juste un simple tableau de sorte que vous voulez probablement enlever cette première exposition tout à fait la liaison

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

Ensuite, dans le modèle FileElement vous voulez déplacer le spectacle de liaison à l'extérieur du modèle de liaison comme f_martinez suggéré

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

Voici un exemple jsFiddle