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>

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

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

这是我喜欢的方式，但接下来我想做的是能够在将新对象添加到数组时（通过用户输入）更新DOM。然而，如果我打电话：

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

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

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/

Handlebars：动态更新对象数组后如何重用模板

1 个答案: