在淘汰赛中递归调用foreach

Question

我在看以下问题Knockout JS treeview with checkboxes，我最终做了很多嵌套的foreach循环，这里是示例。 http://jsfiddle.net/47d6r/384/所以我想知道有没有办法做一种递归foreach？

HTML（想把递归的foreach在这里）

<div id='tree2'> 
    <ul data-bind="foreach: folders"> 
    <li> 
     <span data-bind="text: name"></span> 
     <ul data-bind="foreach: folders"> 
     <li> 
      <span data-bind="text: name"></span> 
      <ul data-bind="foreach: folders"> 
       <li> 
        <span data-bind="text: name"></span> 
        <ul data-bind="foreach: folders"> 
         <li> 
          <span data-bind="text: name"></span> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    </ul> 
    </ul> 
</div> 

的JavaScript

function folder(name) { 
    var self = this; 
    this.name = ko.observable(name); 
    this.folders = ko.observableArray(); 
    this.addFolder = function(name) { 
    self.folders.push(new folder(name)); 
    } 
} 

function model() { 
    var self = this; 
    this.folders = ko.observableArray() 
} 

var mymodel = new model(); 

$(document).ready(function() { 
    ko.applyBindings(mymodel); 
    mymodel.folders.push(new folder('Jord')); 
    mymodel.folders.push(new folder('Mud')); 
    mymodel.folders.push(new folder('Rock')); 
    mymodel.folders.push(new folder('Rock1')); 

    mymodel.folders()[0].addFolder('GroJord'); 
    mymodel.folders()[0].addFolder('ModerJord'); 

    mymodel.folders()[0].folders()[0].addFolder('Jord - Grov Matjord'); 
    mymodel.folders()[0].folders()[0].addFolder('Jord - Fin Matjord'); 

    mymodel.folders()[0].folders()[0].folders()[0].addFolder('Jord Grov Matjord 0 18 verified') 

    mymodel.folders()[0].folders()[0].folders()[0].addFolder('Jord Grov Matjord unknown') 

}); 


$(function() { 


    $("#tree2").jstree({ 
    "checkbox": { 
     "keep_selected_style": false 
    }, 
    "plugins": ["checkbox"] 
    }); 

}); 

Answer 1

不幸lorafrens信息已被删除或删除。他曾经建议使用一个递归调用我自己的模板。可悲的是，我不能将他的答案标记为正确，因为他删除了它。

这里是小提琴http://jsfiddle.net/47d6r/387/

function folder(name) { 
 
    var self = this; 
 
    this.name = ko.observable(name); 
 
    this.folders = ko.observableArray(); 
 
    this.addFolder = function(name) { 
 
    self.folders.push(new folder(name)); 
 
    } 
 
} 
 

 
function model() { 
 
    var self = this; 
 
    this.folders = ko.observableArray() 
 
} 
 

 
var mymodel = new model(); 
 

 
$(document).ready(function() { 
 
    ko.applyBindings(mymodel); 
 
    mymodel.folders.push(new folder('Jord')); 
 
    mymodel.folders.push(new folder('Mud')); 
 
    mymodel.folders.push(new folder('Rock')); 
 
    mymodel.folders.push(new folder('Rock1')); 
 

 
    mymodel.folders()[0].addFolder('GroJord'); 
 
    mymodel.folders()[0].addFolder('ModerJord'); 
 

 
    mymodel.folders()[0].folders()[0].addFolder('Jord - Grov Matjord'); 
 
    mymodel.folders()[0].folders()[0].addFolder('Jord - Fin Matjord'); 
 

 
    mymodel.folders()[0].folders()[0].folders()[0].addFolder('Jord Grov Matjord 0 18 verified') 
 

 
    mymodel.folders()[0].folders()[0].folders()[0].addFolder('Jord Grov Matjord unknown') 
 

 
}); 
 

 

 
$(function() { 
 

 

 
    $("#tree2").jstree({ 
 
    "checkbox": { 
 
     "keep_selected_style": false 
 
    }, 
 
    "plugins": ["checkbox"] 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<link href="http://static.jstree.com/3.0.0-beta3/assets/dist/themes/default/style.min.css" rel="stylesheet"/> 
 
<script src="http://static.jstree.com/3.0.0-beta3/assets/dist/jstree.min.js"></script> 
 

 
<script type="text/html" id="tree-template"> 
 
    <li> 
 
    <span data-bind="text: name"></span> 
 
    <ul data-bind="template: { name: 'tree-template', foreach: folders }"> 
 
    </ul> 
 
    </li> 
 
</script> 
 

 

 
<div id='tree2'> 
 
    <ul data-bind="template: { name: 'tree-template', foreach: folders }"></ul> 
 
</div>