title: KnockoutJS and Nested Sortable List (Two-Dimensional)
body: <p>I am looking for a way to implement a simple nested/nestable tree structure in KnockoutJS; and it should only allow two levels. </p>
  
  <p>What I found so far is this (and a range of very similar approaches here on SO): <a href="https://stackoverflow.com/questions/17348270/knockout-js-nested-sortable-bindings">Knockout.js nested sortable bindings</a></p>
  
  <p>However, in this example - and the others, "Containers" cannot become "Children" and vice versa.</p>
  
  <p>Basically, I am looking for a structure like this: <a href="http://jsfiddle.net/uhVAW/2/" rel="nofollow noreferrer">http://jsfiddle.net/uhVAW/2/</a></p>
  
  <p>I.e. it will ultimately render a list with two levels: parent categories and their children.</p>
  
  <p>My tree-structure in the Knockout ViewModel takes this shape (without all the updating logic):</p>
  
  <pre><code> 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 &lt;li&gt;
   }
  </code></pre>
  
  <p>So, in essence:</p>
  
  <ol>
  <li>Sorting parent level</li>
  <li>Sorting children within parents</li>
  <li>Children can become parents &amp; vice versa</li>
  <li>Only allowing n-levels of nesting (2 in my case)</li>
  </ol>
  
  <p>Cheers! </p>