8

私はあまりにも多くを求めているかもしれませんが、IE8 で動作する html5 要素を含む jQuery テンプレートを取得しようとしています。私はhead.jsを使用しているので、html5要素を登録しています.html5shivも試しましたが、うまくいきませんでした。ページには正常に動作する他の html5 要素がありますが、テンプレートで html5 要素を使用すると、jquery テンプレート システムは何も返しません。

以下は、私のテンプレートの 1 つの例です。

<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で動作させる方法はありますか?

4

5 に答える 5

2

私は自分でこの問題に遭遇しました。この問題は、テンプレート関数によって返される 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 のバグであり、特に temlate エンジンとは関係がないと思われます。

于 2011-03-18T10:13:39.303 に答える
2

ちょっと遅いかもしれませんが、アプリで ie8 のテストを行っているときにこれに遭遇しました。

http://jdbarlett.com/innershiv/をチェックしてください

乾杯

于 2011-08-26T02:06:16.543 に答える
1

特定の問題とは関係ないかもしれませんが、このスレッドは関連する Google 検索結果のように見えるので、Google 経由でアクセスする他の人にも役立つかもしれません。

...

私は同じ問題を抱えていました-さまざまなスクリプトブロックにすべてのテンプレートを含む単一の HTML ファイル (すべてのテンプレートのコレクションとして使用し、HTTP 要求を保存します) があります。

このバルク ファイルから HTML の単一ブロックを抽出するために、.text() と .contents() を使用していましたが、IE8 ではそれを処理できませんでした。

コンテンツを取得するための唯一の信頼できる方法は .html() を使用することであることがわかりました-例：

<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
        // ...
    });
});

Thx、Ben Nadel へ - 彼はテストを行いました: http://www.bennadel.com/blog/1829-Script-Tags-jQuery-And-Html-Text-And-Contents-.htm

于 2011-04-04T12:04:35.117 に答える
0

実際には答えではありませんが、私は同様の問題を抱えていることを確認できます。コンテンツがレンダリングを拒否する場合もあれば、html5要素を対象とするスタイルの適用を拒否する場合もあります。新しいhtml5要素をdivに変更すると、すべてが期待どおりに機能します。

于 2011-03-04T15:16:46.600 に答える
-1

IE8 の場合、HTML5 shiv を使用する必要があります。

私はあなたのJavascriptに挿入しました：

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

結果はこちら: 更新された jsFiddle

于 2011-04-23T21:15:54.047 に答える