title: How to append a new item to an existing Handlebars.js template?
body: <p>I'm new to Handlebars.js. I'm wondering how to add a new item to an existing Handlebar template. There must be a way to <strong>render</strong> the last item to the existing template, right?</p>
  
  <p>Have a look at <a href="http://jsbin.com/epotuz/2/" rel="nofollow">my file</a>.</p>
  
  <p>Thanks for your time!</p>
  
  <p>Here is the jQuery code where I want to create the magic (for the markup: have a look at the file).</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var source   = $("#some-template").html();
  var template = Handlebars.compile(source);
  var data =  [
    {username: "alan", firstName: "Alan", lastName: "Johnson", email: "alan@test.com"},
    {username: "allison", firstName: "Allison", lastName: "House", email: "allison@test.com"},
    {username: "ryan", firstName: "Ryan", lastName: "Carson", email: "ryan@test.com"}
  ];
  $("#content-placeholder").append(template(data));
  $('.btn-primary').on('click',
    function(){
      var thisRow = $('.rows');
      var otherContent_1, otherContent_2, otherContent_3;
      otherContent_1 = $('#firstModal').find('input:eq(0)').val();
      otherContent_2 = $('#firstModal').find('input:eq(1)').val();
      otherContent_3 = $('#firstModal').find('input:eq(2)').val();
      var newObj = {username: otherContent_1, firstName: otherContent_2, email: otherContent_3}
      data.push(newObj);
      /*
      here is the problem how do I append/render this last-item to the template?
      */
      console.log(data.length); // I know that I've 4 items.
      $('#firstModal').modal('hide');
    });
  &lt;/script&gt;
  </code></pre>