handlebars.js - 新しいアイテムを既存の Handlebars.js テンプレートに追加する方法は?

Question

私はHandlebars.jsが初めてです。既存のハンドルバー テンプレートに新しいアイテムを追加する方法を考えています。最後のアイテムを既存のテンプレートにレンダリングする方法が必要ですよね?

私のファイルを見てください。

御時間ありがとうございます！

魔法を作成する jQuery コードを次に示します (マークアップについては、ファイルを参照してください)。

<script type="text/javascript">
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');
  });
</script>