保留元素的JS模板引擎

Question

我有以下问题：

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

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

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

所以我想知道是否有这么多的 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>

模板引擎在原始DOM中找到<span>并替换其更改后的值，但其余元素保持不变。

Answer 1

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

Answer 2

您可以尝试AngularJS

一个简单的例子： http : //jsbin.com/opayuf/4/edit

您可以查看这些示例是否可以满足您的要求http://tutorialzine.com/2013/08/learn-angularjs-5-examples/

HandleBarsJs可能是您所需要的，您可以参阅下面的讨论
Handlebars.js：使用部分模板，就像正常的完整模板一样

您还可以尝试基于HandlerBarsJs的Ember js，可以查看http://emberjs.com/guides/templates/handlebars-basics/

http://emberjs.com/guides/templates/rendering-with-helpers/