title: knockout.js recursive binding
body: <p>I'm trying to do some complex binding with knockout (at least for a newbie like me).</p>
  
  <p>Consider the following data:</p>
  
  <pre><code>var originalData = {
  id: 1,
  name: "Main",
  children: [ { id: 2, name: "bob", children: []}, { id: 3, name: "ted", children: [{id: 5, name:"albert"}, {id: 9, name: "fred"}]} ],
  selectedChild:  { id: 2, name: "bob" }
  };
  
  &lt;table&gt;
  &lt;tr&gt;
      &lt;td data-bind="text: name"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr data-bind="if: children().length &gt; 0"&gt;
      &lt;td&gt;
          &lt;select data-bind="options: children,
              optionsText: function(item){
                  return item.name;
                      }, 
              optionsCaption: 'Choose...'"&gt;&lt;/select&gt;       
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p></p>
  
  <p>Ok, that was the easy part.</p>
  
  <p>The hard part, is that whenever an item is selected in the list, if this item has children then a new select box should appear underneath. Its datasource would be the children of the selected item in the first select box. Of course, it could continue on with any level of deepness. </p>
  
  <p>How should I solve this problem with knockout ? </p>
  
  <p>I've put together a sample of what I have so far on jsfiddle: <a href="http://jsfiddle.net/graphicsxp/qXZjM/">http://jsfiddle.net/graphicsxp/qXZjM/</a></p>