title: Repeatedly Render Dust.js Template with New Data
body: <p>What would be the best way to go about repeatedly rendering a dust template while having it advance in the data file its referencing rather than just repeat from the start each time. For example:</p>
  
  <p>Say I have a list of 100+ people stored as JSON in a variable called <strong>data</strong>:</p>
  
  <pre><code>{
      "people": [
          {
              "name": "Jerry",
              "age": "17"
          },
          {
              "name": "Darcy",
              "age": "19"
          },
          {
              "name": "Jacob",
              "age": "25"
          },
          ... and so on for 100 or so people
      ]
  }
  </code></pre>
  
  <p>And I have this <strong>template.tl</strong> file that exports a row of three names/ages:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div&gt;{name} - {age}&lt;/div&gt;
      &lt;div&gt;{name} - {age}&lt;/div&gt;
      &lt;div&gt;{name} - {age}&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Which I precompile into <strong>template.js</strong>:</p>
  
  <pre><code>(function(){dust.register("template.tl",body_0);function body_0(chk,ctx){return chk.write("&lt;div class=\"row\"&gt;&lt;div&gt;").reference(ctx.get(["name"], false),ctx,"h").write(" - ").reference(ctx.get(["age"], false),ctx,"h").write("&lt;/div&gt;&lt;div&gt;").reference(ctx.get(["name"], false),ctx,"h").write(" - ").reference(ctx.get(["age"], false),ctx,"h").write("&lt;/div&gt;&lt;div&gt;").reference(ctx.get(["name"], false),ctx,"h").write(" - ").reference(ctx.get(["age"], false),ctx,"h").write("&lt;/div&gt;&lt;/div&gt;");}return body_0;})();
  </code></pre>
  
  <p>Then I have an <strong>index.html</strong> file that looks like:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
      ...
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div id="people"&gt;&lt;/div&gt;
  
          &lt;button id="load-more" type="button"&gt;Load More&lt;/button&gt;
      &lt;/body&gt;
  
      &lt;script src="js/dust-core.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/template.js"&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What would be the best way to have it so each time the button is clicked, a row of three people would be appended inside the <code>&lt;div id="people"&gt;&lt;/div&gt;</code>, and each subsequent click would load the next three / test for the end of the data array (can assume the number of people is always a multiple of three for my needs).</p>