私はループしている配列を持っています。条件がtrueになるたびに、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
    });
});

次のようなテンプレートエンジンをプロジェクトで使用することを決定できます。

• 口ひげ
• underscore.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);
});

古い質問ですが、「jQueryを使用する」という質問なので、ベンダーに依存せずにこれを実行できるオプションを提供したいと思いました。

多くのテンプレートエンジンが世の中にありますが、それらの機能の多くは最近好評を博しており<% for、イテレーション（）、条件文（<% if）、変換（<%= myString | uppercase %>）は、せいぜいマイクロ言語と見なされ、最悪の場合はアンチパターンと見なされています。最新のテンプレートプラクティスでは、オブジェクトをDOM（または他の）表現に単純にマッピングすることを奨励しています。

HTML内のテンプレート

あなたがHTMLの残りの部分の横にテンプレートのHTMLを維持するために頼ることができます1つの特性は、非実行用いることで<script> type、例えば<script type="text/template">。あなたの場合：

<script type="text/template" data-template="listitem">
    <a href="${url}" class="list-group-item">
        <table>
            <tr>
                <td><img src="${img}"></td>
                <td><p class="list-group-item-text">${title}</p></td>
            </tr>
        </table>
    </a>
</script>

ドキュメントの読み込み時に、テンプレートを読み取り、単純な String#split

var itemTpl = $('script[data-template="listitem"]').text().split(/\$\{(.+?)\}/g);

トークンを使用すると、代替[text, property, text, property]形式で取得できることに注意してください。これによりArray#map、マッピング関数とともに、を使用してうまくマッピングできます。

function render(props) {
  return function(tok, i) { return (i % 2) ? props[tok] : tok; };
}

どこにprops見えるでしょう{ url: 'http://foo.com', img: '/images/bar.png', title: 'Lorem Ipsum' }。

itemTpl上記のように解析してロードし、items範囲内に配列があると仮定して、すべてをまとめます。

$('.search').keyup(function () {
  $('.list-items').append(items.map(function (item) {
    return itemTpl.map(render(item)).join('');
  }));
});

このアプローチも、かろうじてjQueryにすぎません- document.querySelectorおよびでバニラJavaScriptを使用して同じアプローチをとることができるはず.innerHTMLです。

jsfiddle

JS内のテンプレート

自問する質問は次のとおりです。テンプレートをHTMLファイルとして定義することを本当に望んでいますか？テンプレートはいつでもコンポーネント化して、繰り返したいほとんどのことを再利用するのと同じ方法で、関数を使用してテンプレートを再利用できます。

es7-landでは、分解、テンプレート文字列、および矢印関数を使用して、$.fn.html上記のメソッドを使用して簡単にロードできる実に見栄えのよいコンポーネント関数を記述できます。

const Item = ({ url, img, title }) => `
  <a href="${url}" class="list-group-item">
    <div class="image">
      <img src="${img}" />
    </div>
    <p class="list-group-item-text">${title}</p>
  </a>
`;

その後、次のように、配列からマッピングされた場合でも、簡単にレンダリングできます。

$('.list-items').html([
  { url: '/foo', img: 'foo.png', title: 'Foo item' },
  { url: '/bar', img: 'bar.png', title: 'Bar item' },
].map(Item).join(''));

最後に、DBから読み取った場合や、誰かがページからHTMLを渡して（スクリプトを実行した場合など）、テンプレートに渡されたプロパティをサニタイズすることを忘れないでください。

代わりにHTMLテンプレートを使用してください！

受け入れられた回答はオーバーロードスクリプトメソッドを表すので、私の意見では、オーバーロードスクリプトに伴うXSSリスクにより、はるかにクリーンで安全な別の方法を提案したいと思います。

私が作っデモをどのように行動に、どのように、他に1つのテンプレートを注入編集し、文書のDOMに追加し、それを使用する方法を紹介します。

HTMLの例

<template id="mytemplate">
  <style>
     .image{
        width: 100%;
        height: auto;
     }
  </style>
  <a href="#" class="list-group-item">
    <div class="image">
      <img src="" />
    </div>
    <p class="list-group-item-text"></p>
  </a>
</template>

jsの例

// select
var t = document.querySelector('#mytemplate');

// set
t.content.querySelector('img').src = 'demo.png';
t.content.querySelector('p').textContent= 'demo text';

// add to document DOM
var clone = document.importNode(t.content, true); // where true means deep copy
document.body.appendChild(clone);

HTML <テンプレート>

• +そのコンテンツは、アクティブになるまで効果的に不活性です。基本的に、マークアップは非表示のDOMであり、レンダリングされません。

• +テンプレート内のコンテンツには副作用がありません。テンプレートが使用されるまで、スクリプトは実行されず、画像は読み込まれず、オーディオは再生されません。

• +コンテンツはドキュメントに含まれていないと見なされます。メインページでdocument.getElementById()またはquerySelector()を使用しても、テンプレートの子ノードは返されません。

• +テンプレートはどこでも内部の配置することができ<head>、<body>または<frameset>、それらの要素に許可されているコンテンツの任意のタイプを含むことができます。「どこでも」とは<template>、HTMLパーサーが許可しない場所でも安全に使用できることを意味します。

後退する

ブラウザのサポートは問題ではありませんが、すべての可能性をカバーしたい場合は、簡単に確認できます。

機能を検出<template>するには、DOM要素を作成し、.contentプロパティが存在することを確認します。

function supportsTemplate() {
  return 'content' in document.createElement('template');
}

if (supportsTemplate()) {
  // Good to go!
} else {
  // Use old templating techniques or libraries.
}

スクリプトメソッドのオーバーロードに関するいくつかの洞察

• +何もレンダリングされない- デフォルトで<script>タグが付いているため、ブラウザはこのブロックをレンダリングしませんdisplay:none。
• +不活性-タイプが以外に設定されているため、ブラウザはスクリプトコンテンツをJSとして解析しません"text/javascript"。
• -セキュリティ問題-の使用を推奨します.innerHTML。ユーザー提供のデータの実行時の文字列解析は、XSSの脆弱性に簡単につながる可能性があります。

完全な記事：https : //www.html5rocks.com/en/tutorials/webcomponents/template/#toc-old

便利なリファレンス：https : //developer.mozilla.org/en-US/docs/Web/API/Document/importNode http://caniuse.com/#feat=queryselector

Web コンポーネントの作成Trawersy MediaによるHTMLテンプレートを使用したカスタムWeb コンポーネントの作成チュートリアル：https ://youtu.be/PCWaFLy3VUo

体のどこかに追加

<div class="hide">
<a href="#" class="list-group-item">
    <table>
        <tr>
            <td><img src=""></td>
            <td><p class="list-group-item-text"></p></td>
        </tr>
    </table>
</a>
</div>

次にCSSを作成します

.hide { display: none; }

そしてあなたのjsに追加

$('#output').append( $('.hide').html() );

その他の代替：純粋

私はそれを使用し、それは私に多くの助けをしてくれました。彼らのウェブサイトに示されている例：

HTML

<div class="who">
</div>

JSON

{
  "who": "Hello Wrrrld"
}

結果

<div class="who">
  Hello Wrrrld
</div>

この問題を解決するために、私は2つの解決策を認識しています。

• 1つ目はAJAXに対応しており、別のファイルからテンプレートをロードして、必要なときにを追加するだけです.clone()。

  $.get('url/to/template', function(data) {
      temp = data
      $('.search').keyup(function() {
          $('.list-items').html(null);
  
          $.each(items, function(index) {
               $(this).append(temp.clone())
          });
  
      });
  });

  データが利用可能であることを確認するために、ajaxが完了したらイベントを追加する必要があることを考慮してください！

• 2つ目は、元のhtmlの任意の場所に直接追加し、それを選択してjQueryで非表示にすることです。

  temp = $('.list_group_item').hide()

  テンプレートの新しいインスタンスを追加した後、

  $('.search').keyup(function() {
      $('.list-items').html(null);
  
      $.each(items, function(index) {
          $(this).append(temp.clone())
      });
  });

• 以前のものと同じですが、テンプレートをそこに残したくない場合は、JavaScriptだけで、.detach()非表示の代わりに使用できます（テストしていません！）

  temp = $('.list_group_item').detach()

  .detach() データとイベントを存続させながらDOMから要素を削除します（.remove（）はそうではありません！）

ネイティブHTML5 テンプレート要素の使用に関するDevWLからの非常に良い回答。OPからのこの良い質問に貢献するために、jQuery を使用してこの要素を使用する方法を追加したいと思います。次に例を示します。template

$($('template').html()).insertAfter( $('#somewhere_else') );

のコンテンツはtemplatehtmlではなく、単にデータとして扱われるため、コンテンツをjQueryオブジェクトにラップして、jQueryのメソッドにアクセスする必要があります。