javascript templating engine that maintains focus on textboxes etc?

Question

So I know there is a few templating engines out there, but I thought I'd ask for someones experience and reccomendation on one that can do what I'm after.

I'd previously made an (intranet) web app that used asp.net editable listviews to take input and used an update panel to make it persist the data regularly (save)

This worked ok but was alot of hackery to get focus to maintain on the ajax postback amongst other things. This is because update panels rewrite the whole section of html on each ajax postback.

So I figured for some more control and a better user experience (and quicker speeds) I'd try a jquery/javascript based templating engine. What i'm doing is making a sort of to do list (its more than that but lets just keep it simple for this example) where someoen fills out a line with an action, due date, and some other fields.

I liked John Resigs Microtemplating engine so I used that. However after working it all out it seems that it re-writes the whole javascript template each time it updates, which is just what I was trying to avoid, as it loses the users focus. I was hoping for something that would just append things onto the end - why do they need to rewrite everything?? I could do as I did with the udpate panel and use some hacking based on the current focus but I would rather avoid this and make it seamless.

am I going to have to manually code this up, or is there a decent way of doing it out there?

Answer 1

Resig's Microtemplating is great. However, like most client-side templating engines all it gives you is a string. How you get that string into the DOM is up to you.

Why do they need to rewrite everything?

The templating engine is not overwriting anything. Rather that is being done by you (however it is you are putting it into the DOM). For example:

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

I was hoping for something that would just append things onto the end

Since you are using jQuery it is trivial to append rather than overwrite. Instead of the innerHTML line above you would use jQuery's append method:

$(myElement).append(generatedHtml);

Now, regarding your focus problem, again this is not strictly due to the template engine but rather the nature of DOM manipulation in general. The solution is to force the element you need to have focus to focus:

Lets say your template looked like this, in Resig's microtemplating parlance:

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

Continuing the JavaScript example of prior, you focus like this:

$(myElement).append(generatedHtml);

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