ノックアウトの再帰配列

Question

私はこのjsfiddle再帰的なテンプレートを試していますが、私は動的データレンダリングに固執しています。これまでのところ、私はjsfiddle例に従って、このテンプレートを持っている

[Object 
    Children: Array[2] 
    EventCategory: Object 
] 

が、配列が子供を持っているかどうかを確認する方法：私のデータは次のようになりますか？

<script id="categoryTemplate" type="text/html"> 
     //How to check if data has child and display the child to its parent? 
     <li> 
      <span data-bind="text: name"></span> 
      <ul data-bind="template: { name: 'categoryTemplate', foreach: children }"></ul> 
     </li> 
    </script> 

HTMLレンダリング：

<ul data-bind="template: {name: 'categoryTemplate', foreach: $data.categoryRoot}"></ul> 

ノックアウト配列をレンダリングする方法、結合？配列が子供を持っているかどうかを確認する方法

var categoryElement = function (name, children) { 
    var self = this; 
    self.children = ko.observableArray(children); 
    self.name = ko.observable(name); 
} 

var categoryModel = { 
    categoryRoot: ko.observableArray() 
}; 

var viewModel = function() { 
    var me = this; 
    me.categoryRoot = ko.observableArray(); 

     me.selectCategory = function() { 
      $.get('link-to-get-categories').then(function(response) { 
       var categoryData = [ 
       //new categoryElement("Russia", [ 
       // new categoryElement("Moscow") 
       //]), 
       new categoryElement(response.Data) 

       //me.categoryRoot(categoryData); 
       me.categoryRoot(response.Data); 
      }); 
     } 
} 

ko.cleanNode($('#addEvent')[0]); 
ko.applyBindingsWithValidation(new viewModel(), $('#addEvent')[0]); 

Answer 1

？

あなたがそうのように、データバインドの子供たちのために確認することができます。

self.hasChildren = ko.pureComputed(function() { 
    return self.children().length; 
}); 

Answer 2

<-- ko if: children && children().length --> 
 
<ul></ul> 
 
<-- /ko --> Safe check

：

<-- ko if: children().length --> 
<ul></ul> 
<-- /ko --> 

は、あなたのviewmodelで計算作成して、データバインドを簡素化

Answer 3

概念的な間違い：あなたのツリールート自体はリストではありません。これは単一のツリー要素です。つまり、ツリールートに配列を使用しないでください。

私はまた、完全に自己完結型になるように、ツリー構築用のテンプレートをフリップします。

それ以外にも、ノックアウトの仮想要素とifバインディングで条件付きレンダリングを並べ替えることができます。

var TreeElement = function(name, children) { 
 
    var self = this; 
 
    self.children = ko.observableArray(children); 
 
    self.name = ko.observable(name); 
 
}; 
 

 
var viewModel = { 
 
    treeRoot: new TreeElement(null, [ 
 
     new TreeElement("Russia", [ 
 
      new TreeElement("Moscow") 
 
     ]), 
 
     new TreeElement("Germany"), 
 
     new TreeElement("United States", [ 
 
      new TreeElement("Atlanta"), 
 
      new TreeElement("New York", [ 
 
       new TreeElement("Harlem"), 
 
       new TreeElement("Central Park") 
 
      ]) 
 
     ]), 
 
     new TreeElement("Canada", [ 
 
      new TreeElement("Toronto") 
 
     ]) 
 
    ]) 
 
}; 
 

 
ko.applyBindings(viewModel);

.tree { 
 
    border: 1px solid blue; 
 
}

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

 
<script id="tree" type="text/html"> 
 
    <!-- ko if: children().length --> 
 
    <ul class="tree" data-bind="foreach: children"> 
 
     <li> 
 
      <span data-bind="text: name"></span> 
 
      <!-- ko template: 'tree' --><!-- /ko --> 
 
     </li> 
 
    </ul> 
 
    <!-- /ko --> 
 
</script> 
 

 
<div data-bind="template: {name: 'tree', data: treeRoot}"></div>