如何使用knockout制作HTML树形列表

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

function TreeNode(name, children) {
    this.name = ko.observable(name);
    this.children = ko.observableArray(children);
}

function TreeViewModel() {
    var self = this;
    self.treeData = ko.observableArray([
        new TreeNode("Node 1", [
            new TreeNode("Node 1.1", []),
            new TreeNode("Node 1.2", [])
        ]),
        new TreeNode("Node 2", [
            new TreeNode("Node 2.1", []),
            new TreeNode("Node 2.2", [])
        ])
    ]);
}

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

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

var viewModel = new TreeViewModel();
ko.applyBindings(viewModel, document.getElementById("tree"));