在淘汰賽中遞歸調用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>