[解決済み] JQueryを使ったHTMLテンプレートの追加定義

質問

ループしている配列があります。ある条件が真になるたびに、私は HTML のコピーを、いくつかの値を持つコンテナ要素に追加したい。

このHTMLをスマートな方法で再利用するには、どこに置けばよいのでしょうか？

<a href="#" class="list-group-item">
    <div class="image">
         <img src="" />
    </div>
    <p class="list-group-item-text"></p>
</a>

JQuery

$('.search').keyup(function() {
    $('.list-items').html(null);

    $.each(items, function(index) {
        // APPENDING CODE HERE
    });
});

どのように解決するのですか？

あなたのプロジェクトでは、次のようなテンプレートエンジンを利用することにしてください。

• 口ひげ
• アンダースコア.js
• ハンドル

他のライブラリを入れたくない場合は、John Resig が提供する jQueryソリューション を提供しています。

ブラウザとスクリーンリーダーは、認識されていないスクリプトタイプを無視します。

<script id="hidden-template" type="text/x-custom-template">
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    <tr>
</script>

jQueryを使って、テンプレートに基づいた行を追加すると、以下のようになります。

var template = $('#hidden-template').html();

$('button.addRow').click(function() {
    $('#targetTable').append(template);
});