Javascript 保留元素的JS模板引擎

我有以下问题：

我有一个web应用程序，当数据发生变化时，我需要定期更新用户界面。数据由具有不同属性的项目列表组成。因为这些项目的UI表示可能很复杂，所以我使用JS模板来呈现它们。当它们改变时，我只是在DOM中用表示它们更新状态的HTML替换它们

这种方法很简单，但有几个问题：

• 您需要重新附加所有事件处理程序，因为实际上需要替换元素
• 重新加载资源时会出现闪烁效果（可能可以使用文档片段解决）
• 如果内容频繁更改，则无法使用开发人员工具（inspector），因为所有元素都被替换了

所以我想知道是否有任何JS模板引擎可以处理这种情况。我正在考虑一个功能，它可以智能地匹配新渲染和旧渲染的元素，并且只在内容真正发生更改时才更改内容

我在想这样的事情：

旧HTML

<div>
    <h1>TV</h1>
    <span>$250</span>
    <a href="addtocart?id=123">Add to cart</a>
</div>

<div>
    <h1>TV</h1>
    <span>$260</span>
    <a href="addtocart?id=123">Add to cart</a>
</div>

电视
$250

新建HTML

<div>
    <h1>TV</h1>
    <span>$250</span>
    <a href="addtocart?id=123">Add to cart</a>
</div>

<div>
    <h1>TV</h1>
    <span>$260</span>
    <a href="addtocart?id=123">Add to cart</a>
</div>

电视
$260

---

模板引擎在原始DOM中找到

，并替换其更改的值，但保留其余元素不变。

您可以尝试AngularJS

一个简单的例子：

如果这些示例能够满足您的要求，您可以查看它们

把手可能是您需要的，您可以在

您也可以尝试基于HandlerBarsJs的Ember js，您可以查看它

---

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

我们已经考虑过Angular，但我们觉得它对于我们的项目来说太重了，我们实际上只寻找模板，而不是整个前端框架。无论如何，谢谢你的建议！我认为车把js可能是你的选择。对不起，我在车把中找不到任何类似的功能。你能解释一下你在想什么吗？谢谢使用handlebarjs刷新html，要更新的数据将取决于某些事件的ajax。实际上，您仍然需要使用ajax或其他一些方法，而不仅仅是使用handlebarsJS来更新数据。