javascript - 在 knockout 中递归调用 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 的帖子已被删除。他建议使用一个递归调用自身的模板，我这样做了。遗憾的是，我无法将他的答案标记为正确，因为他删除了它。

这是 fiddle 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>