ノックアウトでforeachを再帰的に呼び出す

Question

私は次の質問Knockout JS treeview with checkboxesを見ていました。ここでは、多くのネストされたforeachループを実行しました。 http://jsfiddle.net/47d6r/384/私は再帰的なforeachの種類を行う方法があるのだろうか？

htmlが、残念ながらポストが削除または削除されたlorafrens

<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

（ここで再帰のforeachを載せていきたいと思います）。彼は再帰的に自分自身を呼び出すテンプレートを使うことを提案していました。悲しいことに、私は彼がそれを取り除いたのと同じ正しい答えを記すことはできません。ここ

はフィドル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>

です