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();