title: Recursion with doT.js
body: <p>Assuming I have a data structure like this:</p>
  
  <pre><code>{ list: [ {
           name: "1",
           children: [{
                 name: "1.1",
                 children: []
              },
              {
                 name: "1.2",
                 children: [{
                       name: "1.2.1",
                       children: []
                    }
                 ]
              }
           ]
        },
        {
           name: "2",
           children: [{
                 name: "2.1",
                 children: [{
                       name: "2.1.1",
                       children: []
                    },           
                    {
                       name: "2.1.2",
                       children: []
                    },               
                    {
                       name: "2.1.3",
                       children: []
                    }
                 ]
              },
              {
                 name:  "2.2",
                 children: []
              },
              {
                 name: "2.3",
                 children: []
              }
           ]
        },
        {
           name: "3",
           children: [{
                 name: "3.1",
                 children: []
              }
           ]
        }
     ]
  }
  </code></pre>
  
  <p>How would I go about creating a template with doT.js that will recursively go through the object and build nested lists?</p>
  
  <p>Building the html string directly in JS with a recursive function is straight forward enough: (<a href="http://jsfiddle.net/fergal_doyle/WN8hZ/5/" rel="nofollow noreferrer">http://jsfiddle.net/fergal_doyle/WN8hZ/5/</a>)</p>
  
  <pre><code>var html = "";
  function buildList(a){
  
      if (a.length == 0){return};
  
      html += "&lt;ul&gt;";
      for (var i = 0; i &lt; a.length; i++)
      {
          html += "&lt;li&gt;" + a[i].name;
          buildList(a[i].children);
          html += "&lt;/li&gt;";
      }
      html += "&lt;/ul&gt;";            
  }
  buildList(data.list);
  
  $("#out").html(html);
  </code></pre>
  
  <p><br>
  <del>But with doT.js this is what I have and after that I'm stumped! (<a href="http://jsfiddle.net/fergal_doyle/BTZpu/4/" rel="nofollow noreferrer">http://jsfiddle.net/fergal_doyle/BTZpu/4/</a>)</del></p>
  
  <p><strong>EDIT:</strong>
  I can do it by mixing in some JS with evaluation (<a href="http://jsfiddle.net/fergal_doyle/he8AN/" rel="nofollow noreferrer">http://jsfiddle.net/fergal_doyle/he8AN/</a>)</p>
  
  <pre><code>{{ function buildList(a) { }}
  
      {{?a.length}}
      &lt;ul&gt;
          {{~a :v}}
          &lt;li&gt;
              {{=v.name}}
              {{ buildList(v.children); }}
          &lt;/li&gt;
          {{~}}
      &lt;/ul&gt;
      {{?}}
  
  {{ } }}
  
  {{ buildList( it.list ); }}
  </code></pre>
  
  <p>I was trying to achieve it using partials. Defining a ul snippet then have that snippet calling itself passing in an array as a param, but I'm getting a "too much recursion" error. If there's any way to get the below working, it's a lot neater than the above I think. (<a href="http://jsfiddle.net/fergal_doyle/qazGe/4/" rel="nofollow noreferrer">http://jsfiddle.net/fergal_doyle/qazGe/4/</a>)</p>
  
  <pre><code>{{##def.ul:a:
      &lt;ul&gt;
      {{~a :value}}
          &lt;li&gt;{{=value.name}}{{#def.ul:value.children}}&lt;/li&gt;
      {{~}}
      &lt;/ul&gt;
  #}}
  
  {{#def.ul:it.list}}
  </code></pre>