title: Recursive templating with the KnockoutJs mapping plugin
body: <p>I am trying to do recursive templating on a tree using the <a href="http://knockoutjs.com/documentation/plugins.mapping.html" rel="nofollow"><strong>ko.mapping 
  plugin</strong></a>, but I can't get to have it rendered, unless I define <strong>separate</strong> 
  templates for each level. </p>
  
  <p>In the following case, I want to reuse the <strong>mvvmTreeViewGroupTemplate</strong> 
  for <strong>mvvmTreeViewSubGroups</strong> as well, but this is not being rendered, is 
  this a bug or not implemented feature? </p>
  
  <pre><code>&lt;div id="treeViewArea"&gt;
      &lt;ul data-bind='template: { 
                              name: "mvvmTreeViewGroupTemplate", 
                              foreach: MvvmTreeItemGroups,
                              beforeRemove: function(elem) { $(elem).slideUp() },
                              afterAdd: function(elem) { $(elem).hide().slideDown() } 
                              }'&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
          &lt;script type="text/x-jquery-tmpl" id="mvvmTreeViewGroupTemplate"&gt;  &lt;li&gt; 
              &lt;span data-bind="text: Title" class="mvvmTreeItemStyle"/&gt;&lt;/br/&gt;     &lt;ul data-bind='template: { 
                                      name: "mvvmTreeViewItemTemplate", 
                                      foreach: MvvmTreeItems, 
                                      beforeRemove: function(elem) { $  (elem).slideUp() }, 
                                      afterAdd: function(elem) { $  (elem).hide().slideDown() } 
                                      }'&gt; 
              &lt;ul data-bind='template: { 
                                      name: "mvvmTreeViewSubGroupTemplate", 
                                      foreach: this.MvvmTreeItemSubGroups, 
                                      beforeRemove: function(elem) { $  (elem).slideUp() }, 
                                      afterAdd: function(elem) { $  (elem).hide().slideDown() } 
                                      }'&gt; 
              &lt;/ul&gt; 
              &lt;/ul&gt;  
      &lt;/li&gt;  
      &lt;/script&gt;
      &lt;script type="text/x-jquery-tmpl" id="mvvmTreeViewSubGroupTemplate"&gt;  &lt;li&gt; 
              &lt;span data-bind="text: Title" class="mvvmTreeItemStyle"/&gt;&lt;/br/&gt;     
  &lt;ul data-bind='template: { 
  
                                      name: "mvvmTreeViewItemTemplate", 
                                      foreach: MvvmTreeItems, 
                                      beforeRemove: function(elem) { $  (elem).slideUp() }, 
                                      afterAdd: function(elem) { $  (elem).hide().slideDown() } 
                                      }'&gt; 
              &lt;/ul&gt;
        &lt;/li&gt;  
      &lt;/script&gt;
  </code></pre>
  
  <p>JSON and script looks like this, </p>
  
  <pre><code>var data = { 
              MvvmTreeItemGroups: [ 
              { 
                  Id: 1, Title: 'Group 1', 
                  MvvmTreeItemSubGroups: [{ 
                      Id: 1, Title: 'Group 11', 
                      MvvmTreeItems: [{ Id: 'i111', Title: 'Item 111' }, 
  { Id: 'i112', Title: 'Item 112'}] 
                  }, 
                      { 
                          Id: 1, Title: 'Group 121', 
                          MvvmTreeItems: [{ Id: 'i121', Title: 'Item 
  121' }, { Id: 'i122', Title: 'Item 122'}] 
                      }], 
                  MvvmTreeItems: [{ Id: 'i11', Title: 'Item 11' }, { Id: 
  'i12', Title: 'Item 12'}] 
              }, 
                  { 
                      Id: 2, Title: 'Group 2', 
                      MvvmTreeItemSubGroups: [{ 
                          Id: 1, Title: 'Group 211', 
                          MvvmTreeItems: [{ Id: 'i211', Title: 'Item 
  211' }, { Id: 'i212', Title: 'Item 212'}] 
                      }, 
                      { 
                          Id: 1, Title: 'Group 121', 
                          MvvmTreeItems: [{ Id: 'i121', Title: 'Item 
  121' }, { Id: 'i122', Title: 'Item 122'}] 
                      }], 
                      MvvmTreeItems: [{ Id: 'i21', Title: 'Item 21' }, 
  { Id: 'i22', Title: 'Item 22'}] 
                  }] 
          }; 
  
  var viewModel = ko.mapping.fromJS(data);
          console.log(viewModel);
          ko.applyBindings(viewModel, treeViewArea);
  </code></pre>