3

私はjqueryテンプレートを持っています:

<div id="test_template">
    <img src="${url}" width="31" height="32" alt="" />
    ${url}
</div>

私はこれでそれをコンパイルします：

test_template = $('#test_template').template();

私はこれでそれをレンダリングします:

$.tmpl(test_template, {url:'http://sstatic.net/stackoverflow/img/sprites.png'}).appendTo('#render_test');

最終結果は次のとおりです。

<div id="render_test">
<img height="32" width="31" alt="" src="$%7Burl%7D">   http://sstatic.net/stackoverflow/img/sprites.png</div>

明らかに、URL が src="" タグにあると思っていましたが、そうではありません (ただし、タグの後に正しく出力されています)。template() によって作成された匿名関数を見ると、src="${url}" が JavaScript に変換されていないことがわかります。HTMLとしてエンコードして吐き出すだけです

私は何を間違っていますか？

4

3 に答える 3

2

私は何が間違っているのですか？

本物を使用し<img>ます。

のような属性を使用する<img src>と、ブラウザが値を修正して有効にする場合があります。したがって、文字{}はURLで有効ではないため、ブラウザはそれらをにエンコードする場合があります%7B%7D。これはおそらくブラウザ固有です。ニックの例は、Firefoxではうまく機能しないと言っています。（IEでも、が欠落varしているため失敗しますが、これtest_templateは無関係の問題です。）

HTML要素を作成するときは、HTMLソースが維持されないことに注意してください。ブラウザはそれを解析して大量のDOMノードにします。html()（ ）を呼び出すとinnerHTML、それらのDOMノードのシリアル化が得られますが、これは元のマークアップのフォーマットを正確に保持していません。特に、元のマークアップが実際には有効なHTMLではなく、テンプレート用の単なるプレースホルダーである場合。

このため、テンプレートの作成に実際のページ内要素を使用することはありません。jquery-tmplがその$(element).template()メソッドでこれを推奨しているのは間違いだと思います。プラグインの問題はそれだけではありません。たとえばdata()、テンプレート内の要素にまたはイベントハンドラーを配置した場合、そのデータ/ハンドラーはIEに誤ってコピーされますが、他のブラウザーにはコピーされません。これは、ナイーブなinnerHTMLコピーとjQueryの恐ろしいノードIDハックが原因です。

したがって、を使用する必要がある場合はjquery-tmpl、ノードではなく文字列を使用してください。必要に応じて、に埋め込まれた文字列を使用し<script>ますが、実際のページはめ込み要素は使用しないでください。（この問題だけでなく、実際のコンテンツではないコンテンツがドキュメントに含まれていることも意味的に疑わしいです。）

于 2010-10-17T22:54:33.983 に答える
1

テンプレート プラグインの最新バージョンを使用していることを確認してください。最新のプラグインと jQuery 1.4.2 または 1.4.3 のいずれを使用しても問題はありません。

ここでコードの動作デモを見ることができます。

于 2010-10-17T22:30:46.813 に答える
0

TmplItem を使用する醜いハックでそれを修正します。

        function fixRenderedTemplate(rendered){
            var fixArray = [["img", "src"], ["a", "href"]];
            for (var i=0; i<fixArray.length; i++){
                var tagName = fixArray[i][0];
                var attrName = fixArray[i][1];
                $(tagName, rendered).each(function(index, elem){
                    var data = $(elem).tmplItem().data;
                    var fixTemplate = unescape($(elem).attr(attrName));
                    var url = $.tmpl(fixTemplate, data).text();
                    $(elem).attr(attrName, url);
                });
            }
            return rendered
        }

レンダリングされたテンプレートで関数を呼び出すだけです

于 2011-08-13T13:44:07.843 に答える