如何使用 Knockout 模板在 Knockout 中创建树结构？答案

【问题标题】：How to create a tree structure in Knockout using a Knockout template?如何使用 Knockout 模板在 Knockout 中创建树结构？
【发布时间】：2016-09-01 10:41:48
【问题描述】：

我正在使用Knockout 支持，现在正在创建树形结构的UI 组件。在这里我将动态创建元素，并且我想将数据绑定到新创建的元素。请检查以下代码

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

<script type="text/html" id="tree">
   <li menuid="data bind with attr binding">
      <span>&nbsp;</span>
      <span><a href="#" name="endnode"></span>
      <ul data-bind="template: { name: 'tree', foreach: childNodes }">
     </ul>
   </li>

下面是我的脚本

 var viewModel = {
 Mytree: ko.observable({
childNodes: [
  {
    id: 1,name:"node1",
    childNodes: [ {id: 2, name:"node2", childNodes: [{id: 3,name:"node3", childNodes: [] }] } ]
  },
  {
    id: 4,name:"node4",
    childNodes: [ {id: 5,name:"node5", childNodes: [] } ]
   }
 ]
  })
};

ko.applyBindings(new viewModel.Mytree());

现在我想将 bindable 节点名称附加到树，如下所示：

<span><a href="#" name="endnode" data-bind:"text:childNodes.name"/></span>

<ul data-bind="template: { name: 'tree', foreach: childNodes }">

你能请任何人建议我实现这一目标

【问题讨论】：

标签： javascript database knockout.js knockout-2.0 knockout-templating

【解决方案1】：

如果您将视图模型传递给它（您可以为此使用 $root 语法），您可以在绑定中使用“名称”。上下文会随着它沿着树向下移动而改变......还有一些其他的错误 - 其中一个是 data-bind=（等于，而不是冒号）

试试这个模板...

      <script type="text/html" id="tree">
         <li menuid="data bind with attr binding">
            <span>&nbsp;</span>
            <a href="#" data-bind="text: name"></a>
            <ul data-bind="template: { name: 'tree', foreach: childNodes }" />
         </li>
     </script>

并使用它来启动（注意 $root）

  <ul data-bind="template: { name: 'tree', data: $root }" />

这会给你...

【讨论】：