4

ここSOでの私の最初の質問:)。私は実際に次のようなオブジェクトの配列の形でデータをロードする必要があります：

var data = [
{
    'id': '1',
    'firstName': 'Megan',
    'lastName': 'Fox',
    'picture': 'images/01.jpg',
    'bio': 'bla bla bla bla.'
},
{
    'id': '2',
    'firstName': 'Robert',
    'lastName': 'Pattinson',
    'picture': 'images/02.jpg',
    'bio': 'bli bli bli bli.'
}

次に、この構造を使用してデータをHTMLで表示したいと思います。

<div class="wrapper">
    <article>
        <header>
            <h2>[firstName 1 here]<h2>
        </header>
        <section>
            <p>[bio 1 here]</p>
        </section>
    </article>
    <article>
        <header>
            <h2>[firstName 2 here]<h2>
        </header>
        <section>
            <p>[bio 2 here]</p>
        </section>
    </article>
</div>

そして、私が作成したJS関数は以下のとおりです。

var loadArtists = function() {
    var $tmpHtml = '';
    for (var artist in artists) {
        var objArtist = artists[artist],
        fullname = objArtist.firstName + ' ' + objArtist.lastName,
        bio = objArtist.bio,
        id = objArtist.id,
        pic = objArtist.picture;

        $tmpHtml += '<article><header data-id="' + id + '"><h2>' + fullname + '</h2></header><section data-id="' + id + '"><div class="imgContainer"><img alt="' + fullname + '" src="' + pic + '" /></div><h2 class="hiddenName">' + fullname + '</h2><p>' + bio + '</p></section></article>'; 
    }

    $('div.wrapper').append($tmpHtml);
};

それらのコードは良いですか？または、HTMLを構築するためのより優れたよりエレガントな方法がありますか？

ありがとう！

4

2 に答える 2

2

答えてくれてありがとう。コードを改善するためにMustache.jsを使用することになりました。jQueryテンプレートリンクを提供してくれたMuraliに感謝します。これにより、利用可能なHTMLテンプレートライブラリのいくつかについてさらに調査することができました。jQueryテンプレートが廃止され、jQueryチームからのサポートを受けなくなったため、jQueryテンプレートを選択しなかった理由。

于 2013-03-15T05:17:42.437 に答える
0

jTemplatesを使用します。

また

string.formatを使用してテンプレート文字列をフォーマットします

于 2013-03-14T06:42:56.500 に答える