保留元素的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/