title: jQuery appending template recursively
body: <p>I'm trying to build a tree structure using <code>Handlebars.js</code> and recursion:</p>
  
  <pre><code>/**
   * Clear the categories container and render the roots
   */
  function renderTree(json)
  {
      $categories.html('');
      $.each(json, function(){
          renderBranch(null, this);
      });
  }
  
  /**
   * Render a branch and its children recursively passing the parent element
   */
  function renderBranch(parent, branch)
  {
      var data = {
          id: branch.identifier,
          label: branch.text
      };
  
      // If parent is null, it's a root, use the root template
      if (null == parent) {
          parent = $categories;
          template = $(templates.root({category: data}).replace(/(?:(?:^|\n)\s+|\s+(?:$|\n))/g,'').replace(/\s+/g,' '));
      } else {
          // it not a root, user the standard category template
          template = $(templates.branch({category: data}).replace(/(?:(?:^|\n)\s+|\s+(?:$|\n))/g,'').replace(/\s+/g,' '));
      }
  
      // if the category has children, append a child element and fill it with the children
      if (ObjectLength(branch.children) &gt; 0) {
          var child = $("&lt;ul&gt;&lt;/ul&gt;").addClass('child').appendTo(template);
          $.each(branch.children, function(){
              renderBranch(child, this);
          });
      }
  
      // Finally append the current template to the parent one
      template.appendTo(parent);
  }
  </code></pre>
  
  <p>Here are my <code>Handlebars.js</code> templates:</p>
  
  <pre><code>&lt;script id="root-template" type="text/x-handlebars-template"&gt;
      &lt;ul class="category-tree" style="margin: 0 5px 20px 0;padding:5px;border-radius: 2px;background-color:#e1ebff;width:30%;"&gt;
          &lt;span class="title selectable" data-id="{{ category.id }}" data-label="{{ category.label }}" style="font-weight:bold"&gt;{{ category.label }}&lt;/span&gt;
      &lt;/ul&gt;
  &lt;/script&gt;
  
  &lt;script id="branch-template" type="text/x-handlebars-template"&gt;
      &lt;li&gt;
          &lt;span class="selectable" data-id="{{ category.id }}" data-label="{{ category.label }}"&gt;{{ category.label }}&lt;/span&gt;
      &lt;/li&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>I end up with the leaf of the tree, so the recursion is working but the child template is not attached to the parent and the parent are not attached to the parent... etc.</p>
  
  <p>I end up with the following DOM:</p>
  
  <pre><code>&lt;div class="categories" style="float: left; width: 100%; margin-bottom: 40px; position: relative; height: 0px;"&gt;
      &lt;li&gt;&lt;span class="selectable" data-id="8" data-label="Classic and Antique Car"&gt;Classic and Antique Car&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;&lt;span class="selectable" data-id="36" data-label="Vocational Schools"&gt;Vocational Schools&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;&lt;span class="selectable" data-id="361" data-label="Mexican"&gt;Mexican&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;&lt;span class="selectable" data-id="85" data-label="Cardiologists"&gt;Cardiologists&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;&lt;span class="selectable" data-id="410" data-label="Canoes and Kayaks"&gt;Canoes and Kayaks&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;&lt;span class="selectable" data-id="151" data-label="Candy Stores"&gt;Candy Stores&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;&lt;span class="selectable" data-id="421" data-label="Car and Truck Rentals"&gt;Car and Truck Rentals&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;&lt;span class="selectable" data-id="437" data-label="Lodges and Vacation Rentals"&gt;Lodges and Vacation Rentals&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;&lt;span class="selectable" data-id="446" data-label="Career Counseling"&gt;Career Counseling&lt;/span&gt;&lt;/li&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Anyone sees where I'm mistaken?
  Cheers, 
  Maxime</p>