Question

我是Handlebars.js的新手。我想知道如何将新项添加到现有的Handlebar模板中。必须有一种方法渲染最后一项到现有模板，对吗？

谢谢你的时间！

这是我想要创建魔法的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>

Answer 1

我找到了解决这个问题的方法：

在将新项添加到DOM之前，我基本上清空了整个表。然后我再次渲染整个模板，因为我知道我的数组已经更新（在幕后）。

谢谢！

这将是诀窍：

$("#content-placeholder").empty();
        $("#content-placeholder").append(template(data));

如何将新项目附加到现有的Handlebars.js模板？

1 个答案: