Ich habe ein Array, das ich durchlaufe. Jedes Mal, wenn eine Bedingung erfüllt ist, möchte ich eine Kopie des folgenden HTMLCodes an ein Containerelement mit einigen Werten anhängen .

Wo kann ich diesen HTML-Code auf intelligente Weise wiederverwenden?

<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
    });
});

Sie können sich dafür entscheiden, in Ihrem Projekt eine Vorlagen-Engine zu verwenden, z. B.:

• Schnurrbart
• underscore.js
• Lenker

Wenn Sie keine weitere Bibliothek einbinden möchten, bietet John Resig eine jQuery-Lösung an , die der folgenden ähnelt.

Browser und Screenreader ignorieren nicht erkannte Skripttypen:

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

Wenn Sie mit jQuery Zeilen basierend auf der Vorlage hinzufügen, ähnelt dies:

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

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

Alte Frage, aber da die Frage "using jQuery" lautet, dachte ich, ich würde eine Option bereitstellen, mit der Sie dies tun können, ohne eine Herstellerabhängigkeit einzuführen.

Zwar gibt es eine Vielzahl von Template-Engines, doch viele ihrer Funktionen haben sich in letzter Zeit als ungünstig erwiesen , wobei Iteration ( <% for), Bedingungen ( <% if) und Transformationen ( <%= myString | uppercase %>) bestenfalls als Mikrosprache und im schlimmsten Fall als Anti-Patterns angesehen werden. Moderne Vorlagenpraktiken empfehlen, ein Objekt einfach seiner DOM-Darstellung (oder einer anderen Darstellung) zuzuordnen, z. B. dem, was wir mit Eigenschaften sehen, die Komponenten in ReactJS zugeordnet sind (insbesondere zustandslose Komponenten).

Vorlagen in HTML

Eine Eigenschaft, auf die Sie sich verlassen können, um den HTML-Code für Ihre Vorlage neben dem Rest Ihres HTML-Codes zu halten, ist die Verwendung eines nicht ausgeführten <script> type, z <script type="text/template">. Für Ihren Fall:

<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>

Lesen Sie beim Laden des Dokuments Ihre Vorlage und markieren Sie sie mit einem einfachen Token String#split

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

Beachten Sie, dass Sie unser Token im alternierenden [text, property, text, property]Format erhalten. Auf diese Weise können wir es Array#mapmit einer Mapping-Funktion gut abbilden:

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

Wo propskönnte so aussehen { url: 'http://foo.com', img: '/images/bar.png', title: 'Lorem Ipsum' }.

Alles zusammen, vorausgesetzt, Sie haben Ihre Daten itemTplwie oben beschrieben analysiert und geladen und haben ein itemsArray im Gültigkeitsbereich:

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

Dieser Ansatz ist auch nur knapp jQuery - Sie sollten in der Lage sein, den gleichen Ansatz mit Vanille-Javascript mit document.querySelectorund zu verfolgen .innerHTML.

jsfiddle

Vorlagen in JS

Eine Frage, die Sie sich stellen sollten, lautet: Möchten / müssen Sie Vorlagen wirklich als HTML-Dateien definieren? Sie können eine Vorlage jederzeit so komponieren und wiederverwenden, wie Sie die meisten Dinge, die Sie wiederholen möchten, wiederverwenden würden: mit einer Funktion.

In es7-land können Sie mithilfe von Destrukturierung, Vorlagenzeichenfolgen und Pfeilfunktionen geradezu hübsch aussehende Komponentenfunktionen schreiben, die mit der $.fn.htmlobigen Methode einfach geladen werden können .

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>
`;

Dann können Sie es einfach rendern, sogar aus einem Array, wie folgt:

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

Oh und letzter Hinweis: Vergessen Sie nicht, Ihre an eine Vorlage übergebenen Eigenschaften zu bereinigen, wenn sie aus einer Datenbank gelesen wurden oder jemand HTML von Ihrer Seite übergeben (und dann Skripte usw. ausführen) könnte.

Verwenden Sie stattdessen eine HTML-Vorlage!

Da die akzeptierte Antwort eine Überladungsskriptmethode darstellen würde, möchte ich eine andere vorschlagen, die meiner Meinung nach aufgrund der XSS-Risiken, die mit dem Überladen von Skripten einhergehen, viel sauberer und sicherer ist.

Ich habe eine Demo erstellt , um Ihnen zu zeigen, wie Sie sie in einer Aktion verwenden und wie Sie eine Vorlage in eine andere einfügen, bearbeiten und dann zum Dokument-DOM hinzufügen.

Beispiel 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>

Beispiel 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 <Vorlage>

• + Sein Inhalt ist bis zur Aktivierung effektiv inert. Im Wesentlichen ist Ihr Markup DOM versteckt und wird nicht gerendert.

• + Inhalte in einer Vorlage haben keine Nebenwirkungen. Skripte werden nicht ausgeführt, Bilder werden nicht geladen, Audio wird nicht abgespielt ... bis die Vorlage verwendet wird.

• + Inhalt wird als nicht im Dokument enthalten angesehen. Wenn Sie document.getElementById()oder querySelector()auf der Hauptseite verwenden, werden keine untergeordneten Knoten einer Vorlage zurückgegeben.

• + Vorlagen können überall innerhalb des platziert werden <head>, <body>oder , <frameset>und jede Art von Inhalt enthalten können , die in diesen Elementen erlaubt. Beachten Sie, dass "überall" bedeutet, dass <template>es sicher an Orten verwendet werden kann, die der HTML-Parser nicht zulässt.

Zurückfallen

Browser-Unterstützung sollte kein Problem sein, aber wenn Sie alle Möglichkeiten abdecken möchten, können Sie eine einfache Überprüfung durchführen:

<template>Erstellen Sie zum Erkennen von Funktionen das DOM-Element und überprüfen Sie, ob die Eigenschaft .content vorhanden ist:

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

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

Einige Einblicke in das Überladen von Skriptmethoden

• + Es wird nichts gerendert - der Browser rendert diesen Block nicht, da das <script>Tag display:nonestandardmäßig vorhanden ist.
• + Inert - Der Browser analysiert den Skriptinhalt nicht als JS, da sein Typ auf etwas anderes als festgelegt ist "text/javascript".
• -Sicherheitsprobleme - fördert die Verwendung von .innerHTML. Das Parsen von vom Benutzer bereitgestellten Daten zur Laufzeit von Zeichenfolgen kann leicht zu XSS-Schwachstellen führen.

Vollständiger Artikel: https://www.html5rocks.com/de/tutorials/webcomponents/template/#toc-old

Nützliche Referenz: https://developer.mozilla.org/en-US/docs/Web/API/Document/importNode http://caniuse.com/#feat=queryselector

ERSTELLEN VON WEBKOMPONENTEN Erstellen eines Tutorials für benutzerdefinierte Webkomponenten mithilfe von HTML-Vorlagen von Trawersy Media: https://youtu.be/PCWaFLy3VUo

Fügen Sie irgendwo im Körper hinzu

<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>

dann erstellen Sie CSS

.hide { display: none; }

und füge zu deinem js hinzu

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

Andere Alternative: Rein

Ich benutze es und es hat mir sehr geholfen. Ein Beispiel auf ihrer Website gezeigt:

HTML

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

JSON

{
  "who": "Hello Wrrrld"
}

Ergebnis

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

Um dieses Problem zu lösen, erkenne ich zwei Lösungen:

• Der erste geht mit AJAX, mit dem Sie die Vorlage aus einer anderen Datei laden und jedes Mal hinzufügen müssen, wenn Sie möchten .clone().

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

  Berücksichtigen Sie, dass das Ereignis nach Abschluss des Ajax hinzugefügt werden sollte, um sicherzustellen, dass die Daten verfügbar sind!

• Die zweite Möglichkeit wäre, es direkt an einer beliebigen Stelle im ursprünglichen HTML-Code hinzuzufügen, auszuwählen und in jQuery auszublenden:

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

  Sie können nach dem Hinzufügen einer neuen Instanz der Vorlage mit

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

• Wie die vorherige, aber wenn Sie nicht möchten, dass die Vorlage dort bleibt, sondern nur im Javascript, können Sie sie verwenden (haben sie nicht getestet!), .detach()Anstatt sie auszublenden.

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

  .detach() Entfernt Elemente aus dem DOM, während die Daten und Ereignisse am Leben bleiben (.remove () nicht!).

Sehr gute Antwort von DevWL zur Verwendung des nativen HTML5- Vorlagenelements . Um zu dieser guten Frage aus dem OP beizutragen, möchte ich hinzufügen, wie dieses templateElement mit jQuery verwendet wird, zum Beispiel:

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

Der Inhalt von templateist nicht HTML, sondern wird nur als Daten behandelt. Sie müssen den Inhalt also in ein jQuery-Objekt einschließen, um dann auf die Methoden von jQuery zugreifen zu können.