javascript - KnockoutJS と入れ子になった並べ替え可能なリスト (2 次元)

Question

KnockoutJS で単純なネストされた/ネスト可能なツリー構造を実装する方法を探しています。2 つのレベルのみを許可する必要があります。

私がこれまでに見つけたのはこれです（そして、ここSOでの非常によく似たアプローチの範囲）：Knockout.jsネストされたソート可能なバインディング

ただし、この例と他の例では、「コンテナ」を「子」にすることはできず、その逆も同様です。

基本的に、私は次のような構造を探しています: http://jsfiddle.net/uhVAW/2/

つまり、最終的には、親カテゴリとその子の 2 つのレベルを持つリストをレンダリングします。

Knockout ViewModel のツリー構造は次のようになります (すべての更新ロジックはありません)。

 var VM = function(cats)
 {
    this.categories = ko.observableArray(cats); // bound to the list
 }

 var Category = function
 {
    this.name = ko.observable();
    this.children = ko.observableArray([]); // if exists (i.e. if the cat is a parent), this is bound to a list within the <li>
 }

つまり、本質的に：

1. 親レベルの並べ替え
2. 親内での子のソート
3. 子供は親になり、その逆も可能
4. n レベルのネストのみを許可 (私の場合は 2)

乾杯！