KnockoutJS и вложенный сортируемый список (двухмерный)

Question

Я ищу способ реализовать простую вложенную/вложенную древовидную структуру в KnockoutJS; и он должен допускать только два уровня.

То, что я нашел до сих пор это (и целый ряд очень похожих подходов здесь на SO): Knockout.js nested sortable bindings

Однако, в данном примере - и другие, «контейнеры» не может стать «Дети» и наоборот ,

В принципе, я ищу структуру, как это: http://jsfiddle.net/uhVAW/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 в моем случае)

Cheers!

Answer 1

Вот простой вид дерева с помощью knockout-sortable с рекурсивными шаблонами: http://jsfiddle.net/rniemeyer/Lqttf/

Модель вид будет просто выглядеть следующим образом:

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

ko.applyBindings({ 
    root: new TreeItem("root", [ 
     new TreeItem("A", [ 
      new TreeItem("A1"), 
      new TreeItem("A2") 
     ]), 
     new TreeItem("B", [ 
      new TreeItem("B1"), 
      new TreeItem("B2") 
     ]) 
    ]) 
}); 

мнение будет выглядеть так:

<script id="nodeTmpl" type="text/html"> 
    <li> 
     <a href="#" data-bind="text: name"></a> 
     <div data-bind="if: children"> 
      <ul data-bind="sortable: { template: 'nodeTmpl', data: $data.children }"></ul>    
     </div> 
    </li> 
</script> 

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