我有以下问题:
A 有一个网络应用程序,当数据发生变化时,我经常需要更新用户界面。数据由具有不同属性的项目列表组成。由于这些项目的 UI 表示可能很复杂,因此我使用 JS 模板来呈现它们。当它们发生变化时,我只需将 DOM 中的它们替换为代表其更新状态的 HTML。
这种方法很简单,但有几个问题:
- 您需要重新附加所有事件处理程序,因为您实际上替换了元素
- 重新加载资源时出现闪烁效果(或许可以使用文档片段解决)
- 如果内容频繁更改,则无法使用开发人员工具(检查器),因为所有元素都会被替换
所以我想知道是否有that many的JS模板引擎可以处理这种情况。我正在考虑一种功能,可以智能地匹配新渲染和旧渲染的元素,并且仅在内容真正发生变化时才更改内容。
我正在考虑这样的事情:
旧 HTML
<div>
<h1>TV</h1>
<span>$250</span>
<a href="addtocart?id=123">Add to cart</a>
</div>
新 HTML
<div>
<h1>TV</h1>
<span>$260</span>
<a href="addtocart?id=123">Add to cart</a>
</div>
模板引擎找到<span>
在原始 DOM 中并替换其更改的值,但保持其余元素不变。
最佳答案
最后我遇到了Rivets.js这是一个轻量级、高度可扩展的 JavaScript 模板引擎,具有实时数据绑定(bind)功能。到目前为止我很喜欢它,这正是我所需要的。
关于javascript - 保留元素的 JS 模板引擎,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24960466/