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

ビュー モデルを渡す場合 (これには $root 構文を使用できます)、バインディングで "name" を使用するだけです。コンテキストは、ツリーを下るにつれて変化します...他にもいくつか間違っているビットがあります-1つは 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 }" />

これはあなたに与えるでしょう...