javascript - 保留元素的 JS 模板引擎

Question

我有以下问题:

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 中并替换其更改的值，但保持其余元素不变。

Answer 1

最后我遇到了Rivets.js这是一个轻量级、高度可扩展的 JavaScript 模板引擎，具有实时数据绑定(bind)功能。到目前为止我很喜欢它，这正是我所需要的。