javascript - Handlebars : How to reuse template after dynamically updating array of objects

Question

好的，这是我正在使用的模板

<script id='goalNavTemplate' type="text/x-handlebars-template">

 {{#each this}}
 <div class="bubble" data-dismiss="modal" data-Name="{{name}}"
 style="background:{{color}} url(images/{{icon}}IconSmall.png) 
 no-repeat 13px 14px;"></div>
 {{/each}}

</script>

然后我将数组中的对象添加到带有 Handlebars 的 DOM 中。

var template = Handlebars.compile($('#goalNavTemplate').html());
$('#selectGoalModal .modal-body').append(template(goals));

这按照我喜欢的方式工作，但接下来我想做的是能够在将新对象添加到数组时(通过用户输入)更新 DOM。但如果我打电话:

$('#selectGoalModal .modal-body').append(template(goals)); 

它再次将所有对象添加到 DOM，而不仅仅是最后一个。我当前的解决方法是删除之前添加的元素，然后在更新数组后使用上面的代码行。我想知道是否有更有效的方法使用 Handlebars 来做到这一点？就像有什么方法可以绕过 #each 并仅附加数组中的最后一个对象吗？你会使用 helper 吗？如果是这样，怎么办？对此的任何见解都会很棒。

Answer 1

您可以向目标项添加一些标志，例如datatime并通过HB检查:

{{#each this.items}}
    {{#ifCond this.dt '>=' ../options.dt }}
        <div class="bubble" id="bub-{{id}}" style="background-color:{{color}};">        
            {{id}} - {{name}}
        </div>
    {{/ifCond}}
    {{#updateDOM "#bub-" id dt}}{{/updateDOM}}
{{/each}}

http://jsfiddle.net/2jvndb0L/5/