JavaScript模板引擎，保持焦點在文本框等？

Question

所以我知道這裏有幾個模板引擎，但我想我會請求一些經驗和reccomendation可以做我所追求的。

我以前做的是使用asp.net編輯列表視圖，把輸入和使用的更新面板，使其堅持定期的數據（內部網）的網絡應用（保存）

這個工作不錯，但很多是hackery的重點，以保持在其他事情ajax回發。這是因爲更新面板會在每個ajax回發中重寫html的整個部分。

所以我想了一些更多的控制和更好的用戶體驗（和更快的速度）我想嘗試基於jQuery/JavaScript的模板引擎。我正在做的是做一個清單（它不僅僅是這個，而是讓這個例子簡單些），其中someoen用行動，截止日期和其他字段填充行。

我喜歡John Resigs Microtemplating engine所以我用了。然而，在全部工作之後，似乎它每次更新時都會重新編寫整個JavaScript模板，這正是我想要避免的，因爲它會丟失用戶的注意力。我希望有一些東西可以追溯到最後 - 爲什麼他們需要重寫所有內容？我可以像我在udpate面板上那樣做，並根據當前焦點使用一些黑客技術，但我寧願避免這種情況並使其無縫化。

上午我將不得不手動對此進行編碼，還是有一個體面的做法呢？

Answer 1

Resig's Microtemplating非常棒。但是，像大多數客戶端模板引擎一樣，它只是一個字符串。如何將該字符串放入DOM取決於您。

爲什麼他們需要重寫所有內容？

模板引擎不覆蓋任何東西。而是由完成（但它是你把它放到DOM中）。例如：

var template = Template('template_id'); 

// The template engine simply generates a string: 
var generatedHtml = template({data:'goes here'}); 

// The engine's work is done at this point. 

// Now lets get the string into the DOM: 
myElement.innerHTML = generatedHtml; // OVERWRITES 

我希望的東西，因爲你是使用jQuery是微不足道的附加，而不是覆蓋，將只是追加東西到年底

。取而代之的是innerHTML線的上方，你可以使用jQuery的append方法：

$(myElement).append(generatedHtml); 

現在，關於你的焦點問題，這同樣是不嚴格因模板引擎，而是DOM操作的一般性質。解決的辦法是逼你需要有重點關注的要素：

比方說你的模板看起來像這樣，在Resig的microtemplating說法：

<script type="text/html" id="template_id"> 
Foo: <input type="text" value="<%= data %>" /> 
</script> 

繼續之前的JavaScript的例子，你關注這樣：

$(myElement).append(generatedHtml); 

// Focus the just inserted text box: 
$(myElement).find('input').focus();