IE 8 underscore-js template/jquery strange results with input tags in the template

Question

I've built a system that uses underscore-js to render templates, and it works fine in all browsers but IE.

Here's a fragment of the template:

<td><input type="text"  id="${_id}_name" class="name" value="${name}" /></td>

In IE8, I'll see type=text in the actual text field, if name is an empty string in the supplied object.

Digging a bit deeper I see that the underscore template in IE 8 looks like this:

<tr id="319"><TD><INPUT id=319_name class=name value= type=text></TD>

And the output from underscore in other browsers is:

<td><input type="text" id="310_name" class="name" value=""></td>

So obviously the lack of quotes around attribute values is causing this problem.

I also noticed the same problem with jquery-tmpl.

Here's a fragment of code showing how the template is set-up:

template = _.template( tmpl );

$.each(data.data.stored, function(i, row) {                        
   $('table#user_data').append(template.template(row));

Any ideas how/why this could be happening?

Answer 1

OK, solution found. I found the issue raised on jquery-tmpl's github, here:

https://github.com/jquery/jquery-tmpl/issues/3

Apparently it is caused by the way IE serializes html, and a work around is to put some spaces in the tag. So:

${name} becomes ${ name }