jQuery templates with html5 elements in ie8

Question

I might be asking too much but I'm trying to get jQuery templates with html5 elements working in ie8. I'm using head.js so that's registering the html5 elements, I also tried html5shiv but no luck. There are other html5 elements in the page that work fine, but the jquery template system returns nothing if I use html5 elements in the template.

Here's an example of one of my templates:

<aside>
    <script id="sidebar-template" type="text/x-jquery-tmpl">
        <section>
            <header>${name}</header>
            <section>
                {{each links}}
                <a href="${link}" class="${icon}">${name}</a>
                {{/each}}
            </section>
        </section>
    </script>
</aside>

If I change the html5 elements to divs and stuff the template works in ie8. I should note that this template works in all other browsers, no big surprise there...

I put together a jsfiddle demonstrating my template: http://jsfiddle.net/keegan3d/E6EbG/1/

Is there anyway to get these html5 elements working in ie8?

Answer 1

I encountered this problem myself. The problem occurs in IE8 with html 5 elements when using the jQuery object which is returned by the template function, as input for an .html. For example:

$("#my_container").html($.tmpl("myTemplate", { items: items }));

After trying some things I discovered the following workaround:

var htmlContent = $.tmpl("myTemplate", { items: items }).html();
//assuming we have one outer element, which is a div
htmlContent = "<div>" + htmlContent + "</div>";
$("#my_container").html(htmlContent);

I suspect this is an jQuery bug, and is not specifically related to the temlate engine.

Answer 2

Hey this might be a bit late, but I came across this while doing ie8 testing on my app.. I'm doing similar templating stuff and ie8 wasn't styling it when injecting the html.

Check out http://jdbartlett.com/innershiv/

Cheers