我已经创建了一个网站,使用HTML模板。我可以创建网站,一切都显示正确。但我如何更新模板内的值创建后?
HTML部件
...
<div class="row block-column align-items-center justify-content-center"></div>
<template id="DEVICE_TEMPLATE">
<div class="col-2 col-xl-2" align="center">
<a class="tDeviceHref " >
<img class="tDeviceImg" src="" height="50px" width="50px" title="">
</a>
</div>
<div class="col-10 col-xl-4 "">
<div class="devicePicture" align="center">
<a class="tDeviceLabel text-left" >Name</a>
</div>
<div class="progress" style="height: 25px;">
<div id="opwnwblp1" style="width: 100%;" class="bg-secondary progress-bar progress-bar-animated progress-bar-striped">
<div class="tDeviceVerbrauch "></div>
</div>
</div>
</div>
</template>
...
这是JS部分:
function createGui(devices){
const templ = document.querySelector("#DEVICE_TEMPLATE")
for (var i = 0; i < allDeviceGroups.length; i++) {
// ...
const clone = templ.content.cloneNode(true);
clone.querySelector(".tDeviceImg").src = groupDevice["DEVICE"]["img"]["imgRunning"];
document.querySelector(".block-column").append(clone);
// ...
}
}
上面的代码只是一个洞的一部分,有更多的设置到模板,但不相关的问题。
如果我重新加载createGui函数,gui将一次又一次地追加阿索。我喜欢只刷新部分的值,比如为
clone.querySelector(".tDeviceImg").src = groupDevice["DEVICE"]["img"]["imgRunning"];
1条答案
按热度按时间vktxenjb1#
因为没有办法运行发布的代码(缺少关键变量),但也许你可以从中看到如何使用模板和更新它的内容?
第一个
update如果您在使用模板时维护了对模板的引用(例如在全局变量中),则当您需要更新已经添加到DOM中的内容时,可以调用该变量。