Javascript 如何使用敲除模板在敲除中创建树结构？

我正在使用

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>

现在我想将

bindable

节点名附加到树中，如下所示：

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

---

你能不能请任何人建议我实现这一点

如果你将视图模型传递给它（你可以使用$root语法），你可以在绑定中使用“name”。上下文将随着树的向下移动而改变。。。还有几个其他的位出错了——其中一个是数据绑定=（等于，而不是冒号）

尝试此模板

      <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）

这会给你

---

如果您将视图模型传递给它（您可以使用$root语法），则只需在绑定中使用“name”。上下文将随着树的向下移动而改变。。。还有几个其他的位出错了——其中一个是数据绑定=（等于，而不是冒号）

尝试此模板

      <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 }" />