Knockoutテンプレートを使用してKnockoutでツリー構造を作成する方法は？

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

これはあなたを与えるだろう...