0

関数といくつかのテンプレートを使用して、変数に格納されている HTML 文字列を、配列に格納されているオブジェクトのandプロパティに$.each効果的に入力/置換できるようにしました。 temptitlethumbnailcontent

したがって、たとえば$.each、正規表現のコールバック関数内で が検出され、 の内容に{{title}}置き換えられます。そのため、基本的に、オブジェクトのタイトル プロパティである文字列 'Speak of the Devil and he will appear' に置き換えます。繰り返されます。{{title}}obj.title

私が見つけた問題は、この HTML 文字列 ( temp variable) を本文に追加することです。imgHTML タグが間違った方法で出力され、のコンテンツがタグにobj.title望ましくない属性を作成していますimg

HTML出力:

<h2> Speak of the devil and he shall appear </h2>
<img appear="" shall="" he="" and="" devil="" the="" of="" alt="Speak" src="images/bane.jpg">

ここに私のテンプレートがあります：

<script id="blogTemplate" type="chris/template">
    <h2> {{title}} </h2>
    <img src={{thumbnail}} alt={{title}}>
</script>

そして、ここに私のjQueryコードがあります:

(function() {

        var content = [
            {
                title: 'Speak of the devil and he shall appear',   
                thumbnail: 'images/bane.jpg',
            },

            {
                title: 'Me the joker',   
                thumbnail: 'images/Joker.jpg',
            }
        ];

            var template = $.trim( $('#blogTemplate').html() );

        $.each( content, function( index, obj ) {  

            var temp = template.replace( /{{title}}/ig, obj.title )
                               .replace( /{{thumbnail}}/ig, obj.thumbnail );
            console.log(temp);

            $('body').append(temp);
        });

    })();
4

3 に答える 3

4

属性を引用符で囲むようにテンプレートを変更する必要があります。

<script id="blogTemplate" type="chris/template">
    <h2> {{title}} </h2>
    <img src="{{thumbnail}}" alt="{{title}}">
</script>
于 2012-11-30T15:50:10.710 に答える
0

Handlebars: http://handlebarsjs.com/をご覧になることを強くお勧めします。あなたはほとんど同じことをしていますが、ハンドルバーを使用すると、より多くのサポートが得られます.

于 2012-11-30T15:51:52.387 に答える
0

正規表現で文字{と文字をエスケープする必要があります。つまり}

template.replace(/\{\{title\}\}/ig, obj.title)

エスケープされていない場合、前の文字の出現と{n}正確に一致します。n詳細については、MDN の正規表現ガイドをご覧ください。

于 2012-11-30T15:53:38.643 に答える