gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 00:11:12 26 4
gpt4 key购买 nike

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

<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 吗?如果是这样,怎么办?对此的任何见解都会很棒。

最佳答案

您可以向目标项添加一些标志,例如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/

关于javascript - Handlebars : How to reuse template after dynamically updating array of objects,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30859383/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com