保留元素的 JS 模板引擎答案

【问题标题】：JS templating engine that preserves elements保留元素的 JS 模板引擎
【发布时间】：2014-07-25 16:37:55
【问题描述】：

我有以下问题：

有一个网络应用程序，我需要在数据更改时定期更新用户界面。数据由具有不同属性的项目列表组成。因为这些项目的 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>

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

你可以试试 AngularJS

如果它们能满足您的要求，您可以查看这些示例 http://tutorialzine.com/2013/08/learn-angularjs-5-examples/

你也可以尝试基于HandlerBarsJs的Ember js，可以check out http://emberjs.com/guides/templates/handlebars-basics/

【讨论】：

我们考虑过 Angular，但我们觉得它对我们的项目来说太重了，我们真的只在寻找模板，而不是整个前端框架。无论如何感谢您的建议！
我认为 Handlebars js 可能是你的选择。
抱歉，我在 Handlebars 中找不到这样的功能。你能解释一下你在想什么吗？谢谢！
使用handlebarjs刷新html，需要更新的数据会依赖ajax在一些事件上。其实这种方式还是得用ajax或者其他一些方式，不能只用handlebarsJS来更新数据。