ie8中带有html5元素的jQuery模板答案

【问题标题】：jQuery templates with html5 elements in ie8ie8中带有html5元素的jQuery模板
【发布时间】：2011-07-07 14:33:42
【问题描述】：

我可能要求的太多了，但我正在尝试让带有 html5 元素的 jQuery 模板在 ie8 中工作。我正在使用 head.js 以便注册 html5 元素，我也尝试了 html5shiv 但没有运气。页面中还有其他 html5 元素可以正常工作，但是如果我在模板中使用 html5 元素，jquery 模板系统不会返回任何内容。

这是我的一个模板的示例：

<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>

如果我将 html5 元素更改为 div 并填充模板在 ie8 中工作。我应该注意到这个模板适用于所有其他浏览器，这并不奇怪......

我整理了一个 jsfiddle 来展示我的模板：http://jsfiddle.net/keegan3d/E6EbG/1/

有没有办法让这些 html5 元素在 ie8 中工作？

【问题讨论】：

标签： jquery html internet-explorer-8 jquery-templates

【解决方案1】：

我自己也遇到过这个问题。当使用模板函数返回的 jQuery 对象作为 .html 的输入时，在带有 html 5 元素的 IE8 中会出现问题。例如：

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

在尝试了一些事情后，我发现了以下解决方法：

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

我怀疑这是一个 jQuery 错误，与模板引擎无关。

【讨论】：

【解决方案2】：

嘿，这可能有点晚了，但我在对我的应用程序进行 ie8 测试时遇到了这个问题。我正在做类似的模板工作，而 ie8 在注入 html 时没有对其进行样式设置。

查看http://jdbartlett.com/innershiv/

干杯

【讨论】：

热狗，这看起来很棒！我试试看。

【解决方案3】：

可能与您的具体问题无关，此主题似乎是相关的 google 搜索结果，因此它可能对也通过 google 访问的其他人有所帮助。

...

我遇到了同样的问题 - 我有一个 HTML 文件（我将其用作所有模板的集合，保存 HTTP 请求），其中包含各种脚本块中的所有模板。

为了从这个批量文件中提取单个 HTML 块，我使用了 .text() 和 .contents() - IE8 无法处理。

事实证明，获取内容的唯一可靠方法是使用 .html() - e.x:

<script class="template-header" type="text/x-jQuery-tmpl">
    <div id="container-title" class="container">
        <div class="container-inner">
            <div class="box-headline app-nav">
                <div class="box-inner">
                    <h1><a href="${prefs.urlShopHome}" class="app-nav">${text.name}</a></h1>    
                </div>
            </div>
        </div>
    </div>
</script>

这里是 jQuery 部分：

// ...
"success": function( data, textStatus, jqXHR ) {
    var header = $(data).filter(function(){ return $(this).is('.template-header') });
    header.each(function() {
        var html = $(this).html(); // do not use .text(), .contents() here
        // ...
    });
});

感谢 Ben Nadel - 他做了测试： http://www.bennadel.com/blog/1829-Script-Tags-jQuery-And-Html-Text-And-Contents-.htm

【讨论】：

【解决方案4】：

虽然不是真正的答案，但我可以确认我遇到了类似的问题。在某些情况下，内容拒绝呈现，在其他情况下，针对 html5 元素的样式拒绝应用。将新的 html5 元素更改为 div 可以让一切按我的预期工作。

【讨论】：

是的，这也是我得出的结论。我将所有内容都更改为 div，以便完成项目。 ie8倒计时在哪里？ ie6countdown.com 哈哈。

【解决方案5】：

对于 IE8，您需要使用 HTML5 shiv。

我插入了你的 Javascript：

document.createElement("aside");
document.createElement("section");
document.createElement("header");

这里的结果： Updated jsFiddle

【讨论】：

我尝试了 HTML5 shiv，但在使用 jQuery 模板创建 html5 元素时它不起作用。