Как создать древовидную структуру в нокауте с использованием шаблона нокаута?

Question

Я работаю с 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 }">

Можете ли вы какой-либо один предложить мне достичь этой

Answer 1

Если вы передаёте модель вида (вы можете использовать $ корневой синтаксис для этого) вы можете просто использовать «имя» в связывании. Контекст изменится, как она идет вниз по дереву ... есть несколько других битов неправильно - для одного это данных привязывать = (равно, не двоеточие)

Попробуйте этот шаблон ...

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

и использовать это, чтобы пнуть вещи (примечание $ корень)

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

это даст вам ...