heim - Für Anfänger
Offizielle jQuery-Plugins: Vorlagen-Plugin. Lernen, mit jQuery-Vorlagen zu arbeiten. Coole, helle jQuery- und CSS3-Tooltips
Für Einzelheiten anklicken:

Mit der Veröffentlichung von jQuery ist das Leben für Entwickler viel einfacher geworden. Wir können zum Beispiel ganz einfach Folgendes tun:

$("#someElement").children().each(function() ( $(this).wrap($("")); ));

Dieser Code fügt alle Nachkommen des Elements mit der ID #someElement in das Tag ein. An solchen Operationen ist nichts auszusetzen; Dieser Ausdruck ist absolut richtig und in manchen Situationen sehr praktisch. Der in unserem Skript platzierte HTML-Code stellt jedoch einen Verstoß gegen die Strukturlogik des Codes dar. In diesem einfachen Beispiel ist dieser Verstoß nicht signifikant, in realen Projekten kommt er jedoch sehr häufig vor. Typischerweise enthält ein solcher Code viele HTML-Fragmente, die nach dem Empfang von Daten aus AJAX-Anfragen in das DOM eingebaut werden. Dieser Stil kann schnell zu etwas äußerst Unleserlichem werden.

Durch die Verwendung von Vorlagen können wir diesen Nachteil beseitigen, indem wir HTML-Fragmente von Skripten trennen und so die Logik des Inhalts verschiedener Codetypen trennen. Unterwegs kann ich nicht anders, als Ihnen einige supercoole neue AJAX-Funktionen zu zeigen, die mit jQuery 1.5 eingeführt wurden.

Start

In diesem Beispiel entwickeln wir ein Twitter-Widget, das nicht nur unsere neuesten Beiträge, sondern auch eine Liste mit Freunden und Followern lädt. Für dieses Beispiel habe ich Twitter gewählt, weil es mit JSON-Daten interagiert und die Arbeit damit einfach und unterhaltsam ist.

Lass uns anfangen; Das Widget selbst wird basierend auf der folgenden HTML-Struktur erstellt:

jQuery, AJAX und Templating Dan Wellman

Ehemann, Vater, Frontend-Entwickler und Autor. Schreibt für Nettuts und Packt Publishing. Arbeitet für @designhaus | jQuery-Fanatiker

  • Tweets
  • Freunde
  • Anhänger
Dieses Widget verfügt über fantastische Funktionen, die die Verwendung von JavaScript erfordern. Bitte aktivieren Sie es für ein besseres Interneterlebnis

In diesem Beispiel verwenden wir HTML5. Dazu haben wir einen vereinfachten DOCTYPE und ein Meta-Element angegeben. Möglicherweise bemerken Sie im Code auch eine Verbindung zu Stylesheets, die in ein paar Minuten beschrieben wird. Um die aktuelle Version von IE8 und niedriger zu unterstützen, verwenden wir bedingte Kommentare zum speziellen HTML5shiv-Plugin.

Beiseite verwenden

Höchstwahrscheinlich sieht dieses Widget wie eine Seitenleiste aus und zeigt den Inhalt des angegebenen Twitter-Benutzers an. Vor diesem Hintergrund habe ich beschlossen, den Inhalt in eine . Um einfach auf dieses Element zugreifen zu können, legen wir eine ID dafür fest.

Apropos Markierungen. Alle Beitragstitel des Twitter-Benutzers werden in das Tag eingefügt, und das Bild und alles andere wird in das Tag eingefügt

Sie können dies nach Ihren Wünschen ändern, wenn Sie dieses Beispiel rückentwickeln. Wir könnten alle erforderlichen Daten über JSON erhalten, was wir auch tun werden. Sollte es jedoch zu einer Verzögerung beim Ladevorgang kommen, werden dem Besucher viele leere Blöcke angezeigt. Daher ist es für uns besser, zu warten, bis der Download abgeschlossen ist, und dann die Blöcke zu füllen.

Wir werden auf unserer Seite auch Registerkarten zum Wechseln zwischen Nachrichten-, Freundes- und Abonnentenlisten haben. Alle werden in Tags eingeschlossen

$(Name)
$(Name)
$(ReleaseYear)Regisseur: $(Regisseur)
var movies = [ ( Name: „The Red Violin“, Erscheinungsjahr: „1998“, Regie: „François Girard“), ( Name: „Eyes Wide Shut“, Erscheinungsjahr: „1999“, Regie: „Stanley Kubrick“ ), (Name: „The Inheritance“, Erscheinungsjahr: „1976“, Regie: „Mauro Bolognini“ ) ]; var selectedItem = null; /* Rendern Sie die summaryTemplate mit den „movies“-Daten */ $("#summaryTemplate").tmpl(movies).appendTo("#movieList"); /* Onclick-Handler für Filmvorlagenelemente mithilfe der Zusammenfassungs- oder Detailvorlage hinzufügen */ $("#movieList") .delegate(".movieSummary", "click", function () ( if (selectedItem) ( // Legen Sie die Vorlage fest auf dem zuvor ausgewählten Element // zurück zur Zusammenfassungsvorlage selectedItem.tmpl = $("#summaryTemplate").template(); selectedItem.update(); ) /* Holen Sie sich die Datenstruktur für das Vorlagenelement, zu dem dieses angeklickte Element gehört zu und mache es zum ausgewählten Element */ selectedItem = $.tmplItem(this); /* Setze die Vorlage für dieses Element auf die Detailvorlage */ selectedItem.tmpl = $("#detailTemplate").template(); selectedItem .update(); )).delegate(".movieDetail", "click", function () ( /* Setzt die Vorlage für dieses Element auf die Zusammenfassungsvorlage */ selectedItem.tmpl = $("#summaryTemplate").template (); selectedItem.update(); selectedItem = null; ));

Es ist ziemlich komplex und umfangreich und verwendet mehrere Plugin-Methoden gleichzeitig, entnommen aus.

Beispiel 2: Einfügen von Daten mit Markup in eine Vorlage

.role (Schriftstärke:fett;Schriftstil:kursiv;) #movieContainer (padding-left: 8px;) $(Name)

((HTML-Synopse))

/* Das Synopsis-Datenfeld enthält HTML-Markup. */ var movie = ( Name: „Meet Joe Black“, Synopsis: „Der Sensenmann (Brad Pitt) besucht Bill Parrish (Anthony Hopkins) …“ ); /* Rendern Sie die Vorlage mit den Filmdaten. Die Vorlage verwendet das Vorlagen-Tag ((html)), um die Synopsis-HTML-Markup-Daten einzufügen. */ $("#movieTemplate").tmpl(movie) .appendTo("#movieContainer");

In diesem Beispiel werden der hier entnommenen Vorlage sowohl einfache Zeichenfolgenfeldwerte als auch Werte mit Markup hinzugefügt.

P.S.

Ich habe die Beispiele nicht beschrieben, aber wenn das Publikum meine Initiativen unterstützt, kann ich Schritt für Schritt beschreiben, was, wie und warum, und ein paar weitere Beispiele nennen.

Bitte stellen Sie Fragen zum Plugin im Forum. Wenn es Kommentare speziell zum Artikel gibt, kommentieren Sie diese unten.

Es bietet die Möglichkeit, Vorlagen zu verwenden, um die Generierung von HTML-Elementen aus JavaScript-Datenobjekten zu vereinfachen.

Um Missverständnisse zu vermeiden, möchte ich Sie warnen, dass dieses Modul derzeit nicht aktiv entwickelt oder unterstützt wird und das jQuery-Team seine Verwendung nicht empfiehlt. Das bedeutet nicht, dass Sie es nicht verwenden sollten, aber ich hielt es für meine Pflicht, Ihnen dies zu sagen, bevor Sie es in Ihre Projekte einbeziehen. Ich würde gerne eine andere Option empfehlen, die aktiv entwickelt wird, aber ich konnte noch keinen Ersatz für jQuery-Vorlagen finden, der in seinen Fähigkeiten auch nur annähernd vergleichbar ist. Aber trotz der oben erwähnten Einstellung der Entwickler bleibt dieses Modul immer noch das Beste.

Die Geschichte des jQuery-Vorlagenmoduls ist recht ungewöhnlich. Microsoft und das jQuery-Team gaben bekannt, dass drei von Microsoft entwickelte Plugins den „offiziellen“ Status erhalten haben, was noch nie zuvor einem Plugin erreicht wurde.

Nach einiger Zeit gab das jQuery-Team bekannt, dass es diese Module nicht mehr unterstützt und ihnen ihren offiziellen Status entzieht, sowie ihre Pläne, sie durch andere Funktionen zu ersetzen. Der vorgesehene Ersatz sollte Teil der jQuery-UI-Bibliothek sein. Es ist bedauerlich, aber wahr: Es wurde noch nichts geliefert, was versprochen wurde, und verworfene Plugins sind immer noch verfügbar und weit verbreitet (insbesondere das Template-Plugin).

Natürlich ist es eine persönliche Entscheidung, ob veralteter Code verwendet wird oder nicht, aber ich persönlich mag die von Vorlagen bereitgestellte Funktionalität und verwende sie häufig. Allerdings gehe ich davon aus, dass ich jederzeit einen Blick in den Quellcode werfen und jedes schwerwiegende Problem beheben kann, wenn es auftritt, und die Tatsache, dass man manchmal immer noch Workarounds finden muss, um kleinere Schwierigkeiten zu überwinden, wird durch die Vorteile, die sich aus der Verwendung von Vorlagen ergeben, entschädigt .

Einrichten der jQuery-Vorlagenbibliothek

Bevor Sie jQuery-Vorlagen verwenden können, müssen Sie die jQuery-Vorlagenbibliothek herunterladen und mit Ihrem Dokument verbinden.

Entpacken Sie das Archiv und kopieren Sie die Datei jQuery.tmpl.js (Entwicklungsversion) oder jQuery.tmpl.min.js (Bereitstellungsversion) auf Ihren Webserver. Als Nächstes müssen Sie dem Beispieldokument, das die Vorlagenbibliothek enthält, ein Skriptelement hinzufügen, wie im folgenden Beispiel gezeigt:

jQuery-Bibliothek $(function() ( // Beispielcode kommt hierher )); h1 (Mindestbreite: 70 Pixel; Rand: dick, doppelt schwarz; Rand links: automatisch; Rand rechts: automatisch; Textausrichtung: zentriert; Schriftgröße: x-groß; Polsterung: ..png"); Hintergrund- Größe: enthalten; Rand oben: 0; .dtable (Anzeige: Tabelle;).drow (Anzeige: Tabellenzeile;).dcell (Anzeige: Tabellenzelle; Polsterung: 10px;).dcell > * (vertikal ausrichten : Mitte) Eingabe (Breite: 2em; Textausrichtung: rechts; Rand: dünnes, durchgehendes Schwarz; Auffüllung: 2 Pixel;) Beschriftung (Breite: 6em; Auffüllung links: .5em; Anzeige: Inline-Block;) #buttonDiv ( Text -align: center;) button (padding: 12px;) #oblock (display: block; margin-left: auto; margin-right: auto; min-width: 700px; ) Blumenladen Bestellen

Wir werden diesen Code als Beispieldokument in diesem Artikel verwenden. Sie haben wahrscheinlich bemerkt, dass es sich von der zuvor besprochenen Originalversion nicht nur dadurch unterscheidet, dass eine Bibliothek mit Vorlagen hinzugefügt wurde, sondern auch dadurch, dass Elemente, die verschiedenen Arten von Blumenprodukten entsprechen, entfernt wurden. Dies geschieht speziell, damit wir diese Elemente im Dokument mithilfe der Vorlagenbibliothek auf verschiedene Weise wiederherstellen können.

Das Erscheinungsbild des Quelldokuments im Browserfenster zu diesem Zeitpunkt ist in der Abbildung dargestellt:

Beispiel für eine einfache Datenvorlage

Der beste Weg, Datenmuster zu lernen, besteht darin, sofort loszulegen. Um die grundlegenden Funktionen von Vorlagen zu demonstrieren, verwenden wir den folgenden Beispielcode:

... $(function() ( var data = [ ( Name: „Astra“, Produkt: „Astor“, Lagerbestand: „10“, Preis: 2,99), ( Name: „Narcissus“, Produkt: „Narzisse“, Lagerbestand: „12“, Preis: 1,99), ( Name: „Rose“, Produkt: „Rose“, Lagerbestand: „2“, Preis: 4,99), ( Name: „Pfingstrose“, Produkt: „Pfingstrose“, Lagerbestand: „0“, Preis: 1,50), ( Name: „Primula“, Produkt: „primula“, Lagerbestand: „1“, Preis: 3,12), ( Name: „Snowdrop“, Produkt: „snowdrop“, Lagerbestand: „15 ", Preis: 0,99), ]; $("#flowerTmpl").tmpl(data).appendTo("#row1"); )); .png"/> $(name): ...

In den folgenden Abschnitten werden wir das Beispiel in einzelne Teile aufteilen und den Code für jeden von ihnen separat analysieren. Wenn Daten Teil eines Dokuments sind, spricht man von Inline-Daten. Eine Alternative dazu sind Remote-Daten, die getrennt vom Dokument auf dem Server gespeichert werden. Wir werden uns etwas später mit Remote-Daten befassen, aber vorerst können Sie sehen, dass dieses Problem eng mit der Ajax-Unterstützung zusammenhängt, die jQuery bietet.

Datendefinition

Das Beispiel beginnt mit einer Datendefinition. In unserem Fall handelt es sich bei den Daten um eine Reihe von Objekten, von denen jedes eine eigene Art von Blumenprodukt beschreibt. Der entsprechende Codeausschnitt ist unten:

Var data = [ ( Name: „Astra“, Produkt: „Astor“, Lagerbestand: „10“, Preis: 2,99), ( Name: „Narcissus“, Produkt: „Narzisse“, Lagerbestand: „12“, Preis: 1,99 ), ( Name: „Rose“, Produkt: „Rose“, Lagerbestand: „2“, Preis: 4,99), ( Name: „Pfingstrose“, Produkt: „Pfingstrose“, Lagerbestand: „0“, Preis: 1,50), ( Name: „Primula“, Produkt: „Primula“, Lagerbestand: „1“, Preis: 3,12), ( Name: „Snowdrop“, Produkt: „Snowdrop“, Lagerbestand: „15“, Preis: 0,99), ];

Daten werden als ein oder mehrere JavaScript-Objekte ausgedrückt. Die jQuery-Templating-Bibliothek bietet erhebliche Flexibilität bei der Auswahl der Objekte, die als Daten verwendet werden können. Das oben dargestellte Format, das dem JSON-Datenformat entspricht, ist jedoch das gebräuchlichste. Das JS0N-Format ist sehr wichtig, da es häufig bei der Arbeit mit Ajax verwendet wird.

In diesem Beispiel besteht das Array aus sechs Objekten, von denen jedes über eine Reihe von Eigenschaften verfügt, die ein bestimmtes Produkt beschreiben: Anzeigename, Produktname, Anzahl der verfügbaren Einheiten und Preis.

Vorlagendefinition

Wie Sie wahrscheinlich erraten können, ist das zentrale Element der Vorlagenbibliothek die Datenvorlage. Es handelt sich um eine Sammlung von HTML-Elementen, die Platzhalter enthalten, die verschiedenen Eigenschaften von Datenobjekten entsprechen. Die Vorlage für dieses Beispiel ist unten dargestellt:

.png"/> $(name):

Das erste, was auffällt, ist, dass die Vorlage in einem Skriptelement platziert ist, dessen Typattribut auf einen nicht vorhandenen Typ festgelegt ist – text/x-jquery-tmpl. Dies geschieht, um zu verhindern, dass der Browser versucht, den Vorlageninhalt als normales HTML-Markup zu interpretieren. Obwohl dies nicht unbedingt erforderlich ist, sollte diese Vorgehensweise befolgt werden, da sie äußerst vorteilhaft ist und es Ihnen ermöglicht, viele potenzielle Probleme in der Zukunft zu vermeiden.

Der zweite Punkt, den ich hervorheben möchte, ist, dass das id-Attribut verwendet wird, um die im Skriptelement definierte Vorlage zu benennen. In diesem Fall lautet der Vorlagenname „flowerTmpl“. Um eine Vorlage auf Daten anzuwenden, müssen Sie ihren Namen kennen.

Der Inhalt der Vorlage wird auf alle Objekte im Datenarray angewendet, wodurch für jedes Objekt ein Satz HTML-Elemente entsteht. Sie können sehen, dass die Struktur der Vorlage im Allgemeinen dem Satz von Elementen entspricht, die in früheren Artikeln zur Darstellung verschiedener Arten von Blumenprodukten verwendet wurden. Der Hauptunterschied zwischen ihnen besteht in den Codeelementen, die als Datenplatzhalter fungieren.

Während der Vorlagenverarbeitung wird jeder Platzhalter durch einen Eigenschaftswert ersetzt, der dem aktuellen Objekt entnommen wird. Beispielsweise wird für das erste Objekt des Arrays anstelle des Platzhalters $(product) der Wert der Produkteigenschaft ersetzt, d. h. "Astor". Also Teil des Musters

$(Name):

wird in das folgende HTML-Fragment umgewandelt:

Aster:

Wertersetzung ist nicht das Einzige, was Vorlagen bewirken können. Ihre weiteren Fähigkeiten werden unten besprochen.

Anwenden einer Vorlage

Die Methode tmpl() wird verwendet, um die Vorlage mit Daten zu kombinieren. Dabei geben Sie die zu verwendenden Daten und die darauf anzuwendende Vorlage an. Ein Beispiel für die Verwendung dieser Methode ist unten aufgeführt:

$("#flowerTmpl").tmpl(data).appendTo("#row1");

Hier wählen wir zu diesem Zweck mit der Funktion $() das Element aus, das die Vorlage enthält, rufen für das resultierende Ergebnis die Methode tmpl() auf und übergeben ihr die Daten, die wir verarbeiten möchten, als Argument.

Die Methode tmpl() gibt ein Standard-jQuery-Objekt zurück, das die von der Vorlage abgeleiteten Elemente enthält. In diesem Fall führt dies zu einer Reihe von Divs, die jeweils img-, label- und input-Elemente enthalten, die für eines der im Datenarray enthaltenen Objekte konfiguriert sind. Mit der Methode appendTo() wird der gesamte Satz als untergeordnetes Element in das Element row1 eingefügt. Das Ergebnis ist in der Abbildung dargestellt:

Das Ergebnis ändern

Das resultierende Ergebnis ist für uns nicht ganz zufriedenstellend, da alle Elemente, die unterschiedlichen Farben entsprechen, in einer Zeile angezeigt werden. Aber da wir es mit einem jQuery-Objekt zu tun haben, sollte es nicht allzu schwierig sein, die Elemente nach unseren Wünschen anzuordnen. Das folgende Beispiel zeigt, wie dies durch Manipulation der Ausgabe der tmpl()-Methode erreicht werden kann:

... $("#flowerTmpl").tmpl(data) .slice(0, 3).appendTo("#row1").end().end() .slice(3).appendTo("#row2" );

In diesem Beispiel werden die Methoden „slice()“ und „end()“ verwendet, um den Satz ausgewählter Elemente einzugrenzen und zu erweitern, und die Methode „appendTo()“ wird verwendet, um Teilmengen von Elementen, die von der Vorlage generiert wurden, zu verschiedenen Zeilen hinzuzufügen.

Beachten Sie, dass end() zweimal hintereinander aufgerufen werden musste, um die Menge in den Zustand zurückzubringen, in dem sie sich vor der Verwendung von „slice()“ und „appendTo()“ befand. Daran ist nichts Illegales und ich nutze gerne die end()-Methode, um Dinge in einer einzigen Anweisung zu erledigen, aber die end().end()-Sequenz begeistert mich nicht. In solchen Fällen bevorzuge ich es, die gesamte Aktionsfolge in eine Reihe einzelner Operationen aufzuteilen, wie im folgenden Beispiel gezeigt:

Var templResult = $("#flowerTmpl").tmpl(data); templResult.slice(0, 3).appendTo("#row1"); templResult.slice(3).appendTo("#row2");

In beiden Fällen ist das Ergebnis dasselbe: eine Darstellung einer Produktkollektion in zwei Reihen, die jeweils drei Arten von Farben anzeigen, wie in der Abbildung dargestellt:

Ändern der Art und Weise, wie Eingaben bereitgestellt werden

Ein anderer möglicher Ansatz besteht darin, die Art und Weise zu ändern, wie Daten an die tmpl()-Methode übergeben werden. Nachfolgend finden Sie ein entsprechendes Beispiel:

Var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2");

In diesem Szenario erfolgt die Verteilung der Elemente in Zeilen, indem die Vorlage zweimal verwendet wird – einmal für jede Zeile. Der entsprechende Teil der Datenobjekte wird jedes Mal mit der Methode „slice()“ an die Vorlage übergeben. Trotz des Unterschieds zwischen diesem Ansatz und dem vorherigen erhalten wir das gleiche Ergebnis wie in der Abbildung oben dargestellt.

Ausdrücke auswerten

Datenobjekte können nicht nur zum Abrufen von Eigenschaftswerten verwendet werden. Wenn Sie einen JavaScript-Ausdruck zwischen zwei geschweiften Klammern platzieren, wertet die Vorlagen-Engine ihn aus und fügt ihn in das von der Vorlage generierte HTML-Markup ein. Nachfolgend finden Sie ein entsprechendes Beispiel:

$(Name):

In diesem Muster wird das Wertattribut des Eingabeelements basierend auf dem Wert der stocklevel-Eigenschaft mithilfe eines ternären bedingten Operators festgelegt. Der in geschweifte Klammern eingeschlossene Ausdruck spielt die gleiche Rolle wie der direkte Wert der an seiner Stelle geschriebenen Eigenschaft. Wenn der Wert der stocklevel-Eigenschaft größer als Null ist, wird der Wert auf 1 gesetzt, andernfalls auf - 0.

Die resultierende Seite im Browserfenster ist in der folgenden Abbildung dargestellt. Für alle Farben außer Pfingstrosen wird ein Lagerbestandswert größer Null eingestellt:

Dieses Beispiel veranschaulicht die grundlegende Arbeitsweise mit Vorlagen: Daten werden mit einer Vorlage kombiniert, um DOM-Objekte zu erzeugen, die dann mithilfe der grundlegenden jQuery-Funktionalität dem Dokument hinzugefügt werden. Sie können entweder direkt angegebene Werte oder berechnete Ausdrücke verwenden, um Inhalte zu generieren.

Verwenden von Vorlagenvariablen

Vorlagen sind keine JavaScript-Skripte. Alle Inhalte, die Sie dem Skriptelement hinzufügen, gelten als Teil der Vorlage und werden in die Ausgabe einbezogen. Um Vorlagen flexibler zu gestalten, steht Ihnen eine kleine Anzahl von Kontextvariablen zur Verfügung, die in Platzhalterdeskriptoren verwendet werden können. Eine kurze Beschreibung dieser Variablen ist in der folgenden Tabelle enthalten:

Verwenden der $data-Variable

Die Variable $data gibt das aktuelle Datenelement zurück, auf das die Vorlage angewendet wird. Beispielsweise verweist die verwendete Variable $data nacheinander auf jedes der Objekte, die den verschiedenen Farbtypen entsprechen. Um die Daten im vorherigen Beispiel zu erhalten, verwendete die Vorlage einen ternären bedingten Operator. Dieses Vorgehen ist durchaus akzeptabel, allerdings bereitet das Lesen der resultierenden Vorlagen oft Schwierigkeiten, die es natürlich zu vermeiden gilt.

Ich versuche immer, meinen Vorlagencode auf das nötige Minimum zu beschränken und verwende daher lieber die Variable $data innerhalb von JavaScript-Funktionen, die ich dann aus der Vorlage aufrufe. Die entsprechende Demo finden Sie unten:

$(function() ( var data = [ ( Name: „Astra“, Produkt: „Astor“, Lagerbestand: „10“, Preis: 2,99), ( Name: „Narcissus“, Produkt: „Narzisse“, Lagerbestand: „ 12", Preis: 1,99), ( Name: "Rose", Produkt: "Rose", Lagerbestand: "2", Preis: 4,99), ( Name: "Pfingstrose", Produkt: "Pfingstrose", Lagerbestand: "0" , Preis: 1,50), ( Name: „Primula“, Produkt: „Primula“, Lagerbestand: „1“, Preis: 3,12), ( Name: „Snowdrop“, Produkt: „Snowdrop“, Lagerbestand: „15“, Preis : 0,99), ]; var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)) .appendTo("#row2"); )); Funktion stockDisplay(product) ( return product.stocklevel > 0 ? 1: 0; ) .png"/> $(name):

Dieses Beispiel definiert eine Funktion stockDisplay(), die den Wert zurückgibt, der im Eingabeelement angezeigt werden soll. Das Argument dieser Funktion ist ein Datenobjekt, das wir mithilfe der Variablen $data in die Vorlage abrufen. Wenn man bedenkt, dass es sich nur um einen einfachen ternären Operator handelt, ist der Unterschied in der Lesbarkeit des Codes im Vergleich zur Vorgängerversion nicht sehr groß, bei komplexeren Ausdrücken oder bei wiederholter Verwendung eines Ausdrucks innerhalb derselben Vorlage jedoch schon deutlich auffälliger sein.

Seien Sie vorsichtig, wenn Sie Funktionen definieren, die von der Vorlage aufgerufen werden. Der Punkt ist, dass solche Funktionen definiert werden müssen, bevor die tmpl()-Methode aufgerufen wird. Ich versuche immer, sie am Ende des Skriptelements zu platzieren, aber wenn die Funktion innerhalb des Ready-Event-Handlers sein muss, dann sollte man unbedingt sicherstellen, dass sie vorher definiert wurde. Ein weiterer häufiger Fehler besteht darin, dass eine Funktion oft innerhalb einer Vorlage definiert wird.

Verwenden der Funktion $() innerhalb einer Vorlage

Platzhalter, die in einer Vorlage verwendet werden, können die jQuery-Funktion $() verwenden. Es ist jedoch wichtig zu bedenken, dass von der Vorlage generierte Elemente nicht an das Dokument angehängt werden und daher nicht in die Auswahlsätze von jQuery aufgenommen werden. Ich verwende diese Funktion selten, da ich mich normalerweise mehr für die Elemente und zugehörigen Daten interessiere, die ich selbst erzeuge.

Verwendung der $item-Variable

Das von $item zurückgegebene Objekt dient mehreren Zwecken. Die erste besteht darin, den Austausch zusätzlicher Daten zwischen dem JavaScript-Skript und der Vorlage zu ermöglichen. Nachfolgend finden Sie ein entsprechendes Beispiel:

$(function() ( var data = [ ( Name: „Astra“, Produkt: „Astor“, Lagerbestand: „10“, Preis: 2,99), ( Name: „Narcissus“, Produkt: „Narzisse“, Lagerbestand: „ 12", Preis: 1,99), ( Name: "Rose", Produkt: "Rose", Lagerbestand: "2", Preis: 4,99), ( Name: "Pfingstrose", Produkt: "Pfingstrose", Lagerbestand: "0" , Preis: 1,50), ( Name: „Primula“, Produkt: „Primula“, Lagerbestand: „1“, Preis: 3,12), ( Name: „Snowdrop“, Produkt: „Snowdrop“, Lagerbestand: „15“, Preis : 0,99), ]; $("Heutiges Sonderangebot: " + "50 Cent Rabatt") .insertAfter("h1") .css(( color: "red", fontSize: "14pt", textAlign: "center " ) ); var options = ( discount: $("#offer").data("discount"), stockDisplay: function(product) ( return product.stocklevel > 0 ? 1: 0; ) ); var template = $ (" #flowerTmpl"); template.tmpl(data.slice(0, 3), Optionen).appendTo("#row1"); template.tmpl(data.slice(3), Optionen).appendTo("#row2 ") ; )); .png"/> $(name):

In diesem Beispiel erstellen wir ein Optionsobjekt, das eine Eigenschaft (Discount) und eine Methode (stockDisplay()) definiert. Dieses Objekt wird dann als zweites Argument an die Methode tmpl() übergeben. Die Variable $item bietet Zugriff auf die Eigenschaften und Methoden eines Objekts aus der Vorlage. Wie Sie sehen, wird hier zur Handhabung des Preisnachlasses die Eigenschaft „discount“ des Optionsobjekts verwendet.

Ich möchte Sie auf die Notwendigkeit aufmerksam machen, das Präfix „$“ in die Namen der Kontextvariablen „$item“ und „$data“ aufzunehmen. Das gleiche Präfix ist auch in der Vorlagendeskriptorkonstruktion $(...) erforderlich, die zum Ersetzen von Werten in der Vorlage verwendet wird. Das Weglassen eines dieser Präfixe ist einer der häufigsten Fehler.

Wir werden später über andere Anwendungen dieses Objekts sprechen.

Verwendung verschachtelter Vorlagen

Beim Erstellen komplexer Anwendungen ist es manchmal sinnvoll, eine große Vorlage in mehrere Teile aufzuteilen, die in der Ausführungsphase der Anwendung kombiniert werden. Wie später gezeigt wird, bietet diese Methode der Vorlagenkombination eine flexiblere Ausgabesteuerung. Wir beginnen mit dem Grundlegendsten. Das folgende Beispiel zeigt, wie eine Vorlage auf eine andere verweisen kann:

... .png"/> $(name): ((tmpl($data, $item) "#inputTmpl"))

In diesem Beispiel ist die Vorlage in zwei Teile geteilt. Die erste davon, die Vorlage „flowerTmpl“, wird für jedes Element des Datenarrays aufgerufen. Diese Vorlage ruft wiederum die Vorlage „inputTmpl“ auf, um Eingabeelemente zu erstellen. Die zweite Vorlage wird mit dem Handle ((tmpl)) aufgerufen. Dieser Aufruf benötigt drei Argumente. Die ersten beiden sind das aktuelle Element und das Optionsobjekt. Diese Argumente sind in Klammern eingeschlossen. Das dritte Argument ist die aufzurufende Vorlage. Es kann entweder durch einen jQuery-Selektor (wie oben gemacht) oder durch eine im Skript definierte Variable oder Funktion angegeben werden.

Bedingte Muster verwenden

Die Template-Engine bietet die Möglichkeit, abhängig von der Erfüllung bestimmter Bedingungen dynamisch Entscheidungen über die Verwendung verschiedener Teile der Vorlage zu treffen. Dafür gibt es die Deskriptoren ((if)) und ((/if)), ein Beispiel für deren Verwendung wird im Folgenden vorgestellt:

... ((if stocklevel > 0)).png"/> $(name): ((/if))

Die Bedingung wird im ((if))-Deskriptor angegeben und der Teil der Vorlage zwischen diesem Deskriptor und dem ((/if))-Deskriptor wird nur verwendet, wenn der bedingte Ausdruck als wahr ausgewertet wird. Wenn dieses Ergebnis falsch ist, wird der angegebene Teil der Vorlage ignoriert. In diesem Fall wird der Wert der stocklevel-Eigenschaft überprüft. Wenn dieser gleich Null ist, wird die gesamte FlowerTmpl-Vorlage ignoriert. Das bedeutet, dass nur die Produkte angezeigt werden, die vorrätig sind, wie im Bild dargestellt:

Komplexere Bedingungen können mithilfe des ((else))-Deskriptors angegeben werden. Dadurch können Sie den Teil des Musters angeben, der in Fällen verwendet werden soll, in denen der Ausdruck im ((if))-Deskriptor als falsch ausgewertet wird. Nachfolgend finden Sie ein entsprechendes Beispiel:

... ((wenn Lagerbestand > 5)) .png"/> $(name): ((else Lagerbestand > 0)) .png"/> $(name): (Kleine Menge) ((else)) .png " style="opacity:0.5"/> $(name) (Ausverkauft) ((/if))

In diesem Szenario wird die Menge der angezeigten Artikel dadurch bestimmt, wie viele Einheiten jedes Produkttyps auf Lager sind: mehr als fünf, fünf, weniger als fünf oder nicht vorrätig. Ich habe nur geringfügige Unterschiede zwischen den für jede dieser Bedingungen generierten Elementen eingeführt, es steht Ihnen jedoch frei, diese Funktionen zu verwenden, um völlig unterschiedliche Inhalte zu generieren. Schließlich können Sie bei Bedarf weitere Vorlagen per Bedingung aufrufen.

Das Ergebnis des obigen Skripts ist in der Abbildung dargestellt:

Fangen wir an. Fangen wir an. Das folgende Beispiel zeigt eine Liste von Filmen in einem Array (der vollständige Code für das Beispiel befindet sich in der Datei BasicSample1.htm):

Einfaches Beispiel (1) $(Titel)

Regisseur: $(director)
Besetzung: $(Schauspieler)
Jahr: $(Jahr)

$(function () ( $("#movieTmpl").tmpl(dataItems).appendTo("#movieListBag"); )); Einfaches Beispiel (1)
Und das sehen Sie im Browser:

Schauen wir uns dieses Beispiel im Detail an.

Das erste, was ich mache, ist, eine Verbindung herzustellen jQuery-Kernbibliothek Und jQuery-Vorlagen:


Das wurde schon oft gesagt jQuery-Vorlagen wird darin enthalten sein jQuery-Kernbibliothek- aber in jQuery 1.5 RC1, veröffentlicht am 24. Januar, fehlen noch Vorlagen.

Dann lade ich die Liste der Filme:


Natürlich können Sie die Quelldaten auf jede für Sie geeignete Weise vorbereiten – empfangen Sie sie über eine AJAX-Anfrage, erstellen Sie sie basierend auf Benutzereingaben usw. Ich verwende nur als Beispiel ein statisches Skript.

In der Datei DataItems.js wie folgt:

Var dataItems = [ ( Titel: „Bandits“, Miniaturansicht: „Bandits.jpg“, Regie: „Barry Levinson“, Schauspieler: [„Bruce Willis“, „Billy Bob Thornton“, „Cate Blanchett“], Jahr: 2001, Budget: 95000000, Bruttoeinnahmen: 67631903, Bewertung: 0, Frames: ["Bandits-1.jpg", "Bandits-2.jpg", "Bandits-3.jpg", "Bandits-4.jpg", "Bandits- 5.jpg"] ), ...
Der nächste Schritt besteht darin, eine Vorlage zu erstellen:

$(Titel)

Regisseur: $(director)
Besetzung: $(Schauspieler)
Jahr: $(Jahr)


Bitte beachten Sie, dass die Vorlage im Tag platziert wird SKRIPT, und als MIME-Typ lege ich fest text/x-jquery-tmpl. Wenn beim Parsen eines Dokuments ein unbekannter MIME-Typ auftritt, versucht der Browser nicht, den Inhalt des Tags zu interpretieren SKRIPT, was ich brauche.

Generell kann die Vorlage in jedem Tag platziert werden, zum Beispiel im Tag DIV:

$(Titel)

Regisseur: $(director)
Besetzung: $(Schauspieler)
Jahr: $(Jahr)


Allerdings sind in diesem Fall Nebenwirkungen nicht zu vermeiden, denn Der Browser wird auf jeden Fall versuchen, den Vorlagencode zu interpretieren.

Im obigen Beispiel wird beispielsweise versucht, ein nicht vorhandenes Bild zu laden:

Aber im Falle einer Tabelle kann alles noch viel interessanter sein (vielen Dank an TEHEK für dieses Beispiel!):

((jedes dataItems)) ((/jede))
$(Titel) $(Regisseur) $(Jahr)

Internet Explorer und Opera verarbeiten diesen Code korrekt:

Aber Chrome und Fire Fox „schieben“ den zusätzlichen Code aus der Tabelle, was dazu führt, dass die Tabelle leer ist ... Viel Spaß beim Debuggen! ;-)

Für Tag WÄHLEN ein ähnliches Bild wird beobachtet.

Abschließend instanziiere ich die Vorlage mit folgendem Aufruf:

$("#movieTmpl").tmpl(dataItems).appendTo("#movieListBag");
Was passiert, habe ich im folgenden Diagramm dargestellt:

  • Methode .tmpl() erhält den Vorlagentext - d.h. innerer Text Element, das durch Aufruf erhalten wird $("#movieTmpl").
  • Der Vorlagentext wird kompiliert und darauf basierend eine JavaScript-Funktion erstellt.
  • Es wird eine „Vorlageninstanz“ erstellt – ein Objekt, das einen Verweis auf ein Datenelement (Feld) enthält Daten) als Methodenargument übergeben .tmpl(). Methode .tmpl() Sie können ein Array, ein Objekt, Null oder nennen Sie es ohne Argumente. Wenn Sie ein Array übergeben, wird für jedes Element des Arrays eine eigene Instanz der Vorlage erstellt, die auf dieses Element verweist; in allen anderen Fällen wird nur eine Instanz erstellt.
  • Die kompilierte Vorlagenfunktion wird aufgerufen und ein Instanzobjekt übergeben. Die Funktion gibt den Vorlagentext zurück, in dem alle Ersetzungen vorgenommen wurden.
  • Der im vorherigen Schritt erhaltene Text wird in eine Sammlung von HTML-Elementen umgewandelt. Verweise auf diese Elemente werden auch im Instanzobjekt (Feld) gespeichert Knoten), wodurch Sie die „Ausgabe“ der Vorlage in Zukunft problemlos aktualisieren können, wenn sich die Quelldaten ändern (siehe Abschnitt „Dynamische Aktualisierung“).
  • Und schließlich die Methode .tmpl() kehrt zurück jQuery-eine Sammlung von HTML-Elementen, die dem Dokument mithilfe des Aufrufs hinzugefügt werden appendTo("#movieListBag").
    • Ausdrücke Um Werte in der Vorlage zu ersetzen, verwenden Sie das Tag ${...} . Innerhalb dieses Tags können Sie den Namen der Eigenschaft des an die Methode übergebenen Objekts angeben .tmpl() sowie alle gültigen JavaScript-Ausdrücke, einschließlich eines Funktionsaufrufs.

    Nutzung der Eigenschaften eines Objekts (Array-Elements):

    $(Titel)
    Verwendung von JavaScript-Ausdrücken:

    Budget: $$((budget / 1000000).toFixed(0)) Millionen.
    Brutto: $$((bruttoUmsatz / 1000000).toFixed(1)) Millionen.

    Felder und Methoden der Vorlageninstanz Innerhalb von Ausdrücken können Sie über eine Variable auf die aktuelle Vorlageninstanz zugreifen $item und um auf das aktuelle Datenelement zuzugreifen – eine Variable $Daten.

    Jede Vorlageninstanz enthält die folgenden Felder:

  • Daten– enthält einen Link zu einem Datenelement, das einer Vorlageninstanz zugeordnet ist;
  • tmpl- enthält einen Link zur kompilierten Vorlage, die zum Rendern verwendet wird;
  • Elternteil- wenn die Vorlage über ein Tag von einer anderen Vorlage aufgerufen wurde ((tmpl)), enthält einen Link zur „übergeordneten“ Instanz der Vorlage;
  • Knoten- Enthält nach dem Rendern Links zu HTML-Elementen, die durch die Anwendung der Vorlage generiert wurden.
    • Darüber hinaus die Methode .tmpl() braucht zwei Argumente - Daten Und Optionen. Mit einem Argument Daten Sie bereits kennengelernt haben, wird darüber ein Link zu einem Datenelement übermittelt. Und das Argument nutzen Optionen können Sie einen Verweis auf ein Objekt übergeben, dessen Felder und Methoden auf jede in der Methode erstellte Instanz der Vorlage übertragen werden .tmpl().

    Nachfolgend finden Sie ein Beispiel für die Verwendung dieses Parameters:

    $(Titel)

    Regisseur: $(director)
    Besetzung: $(Schauspieler)
    Jahr: $(Jahr)
    Budget: $$($item.formatBudget(budget)) Millionen.
    Brutto: $$($item.formatGrossRevenue(grossRevenue)) Millionen.


    $(function () ( $("#movieTmpl") .tmpl(dataItems, ( formatBudget: function (value) ( ​​​return (value / 1000000).toFixed(0); , formatGrossRevenue: function (value) ( ​​​​return (value / 1000000).toFixed(1); ) )).appendTo("#movieListBag"); ));
    In diesem Beispiel verwende ich Funktionsaufrufe, um die Budget- und Gebührenwerte zu formatieren, aber um den globalen Namespace nicht zu überladen, habe ich sie über einen Parameter übergeben Optionen Danach wurden diese Funktionen als Methoden der aktuellen Vorlageninstanz verfügbar.

    Schließlich enthält die Vorlageninstanz Methoden aktualisieren() Und html(), deren Verwendung ich weiter unten zeigen werde.

    Wie sieht die kompilierte Vorlage aus? Mit der Methode können Sie sehen, wie die kompilierte Vorlage aussieht .Vorlage(), das lediglich Vorlagen kompiliert. Diese Methode gibt ein Funktionsobjekt zurück, dessen Inhalt leicht anzuzeigen ist:

    $("#compiledTemplateBag").text("" + $("#movieTmpl").template());
    Die im obigen Beispiel verwendete Vorlage sieht beim Kompilieren so aus (Text zur besseren Lesbarkeit formatiert):

    Funktion anonym(jQuery, $item) ( var $ = jQuery, call, _ = , $data = $item.data; mit ($data) ( _.push(" "); if (typeof (title) !== "undefiniert" && (title) != null) ( _.push($.encode((typeof (title) === "function" ? (title).call( $item) : (title)))); ) _.push("

    Director: "); if (typeof (director) !== "undefined" && (director) != null) ( _.push($.encode((typeof (director) === "function" ? (director). call($item) : (director)))); ) _.push("
    Besetzung: "); if (typeof (actors) !== "undefiniert" && (actors) != null) ( _.push($.encode((typeof (actors) === "function" ? (actors) . call($item) : (Schauspieler)))); ) _.push("
    Jahr: "); if (typeof (year) !== "undefiniert" && (year) != null) ( _.push($.encode((typeof (year) === "function" ? (year). call($item) : (Jahr)))); ) _.push("

    "); ) zurückkehren _; )
    Ich denke, dass Sie jetzt verstehen sollten, wie die im Tag angegebenen Ausdrücke verarbeitet werden ${...} - und dieses Verständnis kann Ihnen beim Debuggen erheblich helfen! Die Sache ist die jQuery-Vorlagen führt eine relativ einfache Transformation des Vorlagentextes durch. Wenn Sie also einen Fehler im Ausdruck machen, bezieht sich die Fehlermeldung auf den Text der resultierenden Funktion und kann oft äußerst verwirrend sein.

    Wenn die Vorlage mit einem Fehler kompiliert wird, können Sie den Text der Funktion mit dem Fehler ohne spezielle Tricks leider nicht sehen, weil Die entsprechende Methode wird als privat deklariert.

    Nun, ich denke, das war's mit der Geschichte über die Arbeit. jQuery-Vorlagen Es lohnt sich, es zu vervollständigen und mit der praktischen Anwendung fortzufahren.

    Teil zwei, praktische Bedingungen Um Teile der Vorlage abhängig von bestimmten Bedingungen anzuwenden, in jQuery-Vorlagen Tags werden verwendet ((if))...((else))...((/if)).

    Das folgende Beispiel zeigt die Verwendung dieser Tags (vollständiger Beispielcode befindet sich in der Datei IfElseTag.htm):

    Medien: ((if $item.data.media == "dvd")) ((else $item.data.media == "blue-ray")) ((anders)) ((/Wenn))


    Wie Sie vielleicht erraten haben, soll dieser Code das Symbol des Mediums anzeigen, auf dem sich der Film befindet. So sieht es im Browser aus:

    Als Bedingung in Tags ((Wenn)) Und ((anders)) Sie können jeden gültigen JavaScript-Ausdruck verwenden.

    Sammlungen verarbeiten Um Sammlungen in Vorlagen zu verarbeiten, verwenden Sie das Tag ((jeder))...((/jeder)). Das folgende Beispiel zeigt die Verwendung des Tags ((jede)) um eine Liste der Akteure anzuzeigen (vollständiger Beispielcode befindet sich in der Datei EachTag1.htm):

    Besetzung: ((jeder Schauspieler)) $($value) ((if $index< $data.actors.length - 1}} , {{/if}} {{/each}}

    Als Argument zum Markieren ((jede)) Sie können ein Array, ein Objekt oder übergeben jQuery-Sammlung. Innenetikett ((jede)) verwendet Anruf jQuery.each() Was auch immer die Dokumentation über das Verhalten sagt, ist also jQuery.each() Gilt auch für das Tag ((jede)). Das folgende Beispiel veranschaulicht die Verwendung des Tags ((jede)) um alle Eigenschaften eines Objekts anzuzeigen (vollständiger Beispielcode befindet sich in der Datei EachTag2.htm):

    ((each $data)) $($index) $($value) ((/each))
    Innerhalb eines Tags ((jede)) Es stehen zwei Variablen zur Verfügung: $Wert, das einen Verweis auf das aktuelle Array-Element enthält, und $index, der den Index des aktuellen Array-Elements oder den Namen der Eigenschaft enthält.

    Natürlich im Etikett ((jede)) Sie können andere Tags verwenden und haben darüber hinaus weiterhin Zugriff auf Variablen $item Und $Daten. Im gegebenen Beispiel sind die Variablen $index Und $Daten zusammen mit dem Etikett ((Wenn)) werden verwendet, um ein Komma zwischen Akteursnamen auszugeben – leider eine Variable $zuletzt ist nicht vorgesehen, obwohl es sehr nützlich wäre!

    Schließlich können Sie bei Bedarf die Standardvariablennamen ändern. Im folgenden Beispiel werden diese Namen in geändert meinIndex Und meinWert(Der vollständige Beispielcode befindet sich in der Datei EachTag3.htm):

    Besetzung: ((each(myIndex, myValue) Darsteller)) $(myValue) ((if myIndex< $data.actors.length - 1}} , {{/if}} {{/each}}
    Ich versuche übrigens, den Namen nur für eine Variable zu ändern $index wird zu nichts Gutem führen – es wird kein Fehler auftreten, aber Sie werden auch keinen Zugriff auf den aktuellen Wert erhalten!

    Verschachtelte Vorlagen Vorlagen können sehr groß sein – und dann ist es sinnvoll, sie in mehrere kleinere Teile zu unterteilen oder sich wiederholende Teile einzubeziehen, die sich logischerweise in einer separaten Vorlage trennen lassen. IN jQuery-Vorlagen Dies geschieht über verschachtelte Templates, die über das Tag aufgerufen werden ((tmpl)).

    Das folgende Beispiel veranschaulicht, wie ein Teil des Vorlagencodes in eine andere Vorlage verschoben wird (der vollständige Beispielcode befindet sich in der Datei). NestedTemplates1.htm):

    ...

    Regisseur: $(director)
    Besetzung: ((tmpl „#actorsTmpl“))
    Jahr: $(Jahr)

    ... ((jeder Akteur)) $($value) ((if $index< $data.actors.length - 1}} , {{/if}} {{/each}}
    Im Tag ((tmpl)) muss angegeben werden jQuery-Selektor der aufzurufenden Vorlage oder der Name der zuvor im Cache gespeicherten Vorlage. Weil in diesem Beispiel andere Argumente für das Tag ((tmpl)) Nein, die verschachtelte Vorlage erhält dasselbe Datenelement wie die übergeordnete Vorlage, verfügt jedoch über eine eigene Instanz der Vorlage und des Felds Elternteil es verweist auf die übergeordnete Instanz der Vorlage.

    Das folgende Beispiel zeigt die Übergabe eines neuen Datenelements an eine verschachtelte Vorlage und die Verwendung eines Verweises auf die übergeordnete Instanz der Vorlage. Wie im Fall der Anwendung der Methode .tmpl() Wenn Sie beim Aufrufen einer verschachtelten Vorlage ein Array angeben, wird die Vorlage auf jedes Element des Arrays angewendet (der vollständige Beispielcode befindet sich in der Datei). NestedTemplates2.htm):

    ...

    Regisseur: $(director)
    Besetzung: ((tmpl(actors) „#actors_template“))
    Jahr: $(Jahr)

    ... $($data) ((if $data !== $item.parent.data.actors[$item.parent.data.actors.length - 1])) , ((/if))
    Schließlich zeigt das letzte Beispiel in diesem Abschnitt, wie ein Argument an eine verschachtelte Vorlage übergeben wird Optionen, und demonstriert gleichzeitig als Argument Optionen kann verwendet werden, um das letzte Element im verarbeiteten Array zu bestimmen (vollständiger Beispielcode befindet sich in der Datei). NestedTemplates3.htm):

    ...

    Regisseur: $(director)
    Besetzung: ((tmpl(actors, ( last:actors )) „#actors_template“))
    Jahr: $(Jahr)

    ... $($data) ((if $data !== $item.last)) , ((/if))

    Transformation Eine weitere interessante Gelegenheit jQuery-Vorlagen ist mit der Transformation des HTML-Markups verbunden, für die das Tag verwendet wird ((wickeln))(Im Allgemeinen bedeutet Wrap „Einwickeln“, aber mir scheint, dass der Begriff „Transformation“ die Essenz dessen, was geschieht, besser widerspiegelt.)

    Ein klassisches Beispiel für die Verwendung eines Tags ((wickeln))- So erstellen Sie Lesezeichen:

    So sieht es im Inneren aus (vollständiger Beispielcode befindet sich in der Datei Transformation1.htm):

    ((wrap(null, ( viewState: $item.viewState )) "#tabsTmpl")) Englisch Die Ballade von Ost und West Rudyard Kipling

    OH, Osten ist Osten und Westen ist Westen ...

    ((/wickeln))
    Die Ausgangsdaten für die Transformation werden in der Vorlage platziert tabContent- Es ist diese Vorlage, die ich weiter instanziieren werde.

    Das HTML-Markup, das ich umwandeln werde, wird in das Tag eingefügt ((wickeln)). Für Tag ((wickeln)) Es wird die exakt gleiche Aufrufnotation wie für das Tag verwendet {}}
    Im Browser würde dieses Beispiel so aussehen:

    Caching-Vorlagen bei jedem Anruf $("#...").tmpl(...) Die Vorlage wird kompiliert, was sich trotz der dramatisch erhöhten Geschwindigkeit von JavaScript in modernen Browsern äußerst negativ auf die Leistung auswirken kann. Entwickler jQuery-Vorlagen konnte diese offensichtliche Tatsache nicht ignorieren, also in jQuery-Vorlagen Es wird ein Mechanismus zur Vorkompilierung und Zwischenspeicherung von Vorlagen bereitgestellt.

    Die Vorlage wird wie folgt kompiliert und zwischengespeichert:

    $("#movieTmpl").template("movieTmpl");
    Die kompilierte Vorlage wird im internen Cache gespeichert jQuery-Vorlagen unter dem Namen movieTmpl. Um auf eine zwischengespeicherte Vorlage zuzugreifen, verwenden Sie die Methode jQuery.tmpl(), und der erste Parameter ist der Name der zwischengespeicherten Vorlage:

    $.tmpl("movieTmpl", dataItems).appendTo("#movieListBag");
    Das folgende Beispiel navigiert durch eine Liste von Filmen und verwendet eine zwischengespeicherte Vorlage, um Informationen über den Film anzuzeigen.

    Der Vorlagencode unterscheidet sich praktisch nicht von denen, die ich zuvor verwendet habe. Der einzige Unterschied besteht darin, dass sich unter der Beschreibung des Films zusätzliche Links zur Navigation befinden (der vollständige Beispielcode befindet sich in der Datei). CachedTemplates.htm):

    $(Titel)

    Regisseur: $(director)
    Besetzung: $(Schauspieler)
    Jahr: $(Jahr)

    ((if $item.canMoveBack)) [Zurück]((/if)) ((if $item.canMoveFwd)) [Weiterleiten]((/Wenn))
    Das zugehörige Skript ist ebenfalls einfach:

    Var movieIndex = 0; $(function () ( $("#movieTmpl").template("movieTmpl"); updateMovie(); $("#movieBag").delegate(".nav-link", "click", function () ( movieIndex += parseInt($(this).attr("x-inc")); updateMovie(); )); )); function updateMovie() ( $("#movieBag").empty(); $("#movieBag").append($.tmpl("movieTmpl", dataItems, ( canMoveBack: movieIndex > 0, canMoveFwd: movieIndex< dataItems.length - 1 })); }
    Der Navigationslink-Klickhandler ändert den Index des ausgewählten Films und ruft dann die Funktion auf updateMovie(), wodurch zunächst der Filmbeschreibungscontainer geleert und dann mit neuen Daten gefüllt wird.

    So sieht dieses Beispiel im Browser aus:


    Der Browser lädt natürlich die entsprechende Datei herunter – auf deren Inhalt können Sie aber trotzdem nicht zugreifen.

    Die Vorlage kann jedoch weiterhin in einer separaten Datei abgelegt werden, was buchstäblich eine zusätzliche Codezeile erfordert (der vollständige Beispielcode befindet sich in der Datei):

    $(function () ( $.get("Templates/DynamicLoading.htm", (), function (templateBody) ( $.tmpl(templateBody, dataItems).appendTo("#movieListBag"); )); ));
    Weil In diesem Fall erhalten wir die Vorlage in Form eines Textes; die Methode wird verwendet, um sie zu instanziieren jQuery.tmpl(), dessen erstes Argument der empfangene Vorlagentext ist.

    Ja, Methode jQuery.tmpl() wird verwendet, um sowohl zwischengespeicherte Vorlagen nach Namen als auch als Text angegebene Vorlagen zu instanziieren (Tradition!..) – es ist jedoch „intelligent“ genug, um sie voneinander zu unterscheiden.

    Wenn Sie mehrere verwandte Vorlagen laden müssen, können Sie die Bibliothek verwenden WaitSync(siehe „Asynchrone Aufrufe synchronisieren. WaitSync“) oder schreiben Sie Ihren eigenen Synchronizer (vollständiger Beispielcode befindet sich in der Datei):

    $(function () ( var ws = new WaitSync(function () ( $.tmpl("movieTmpl", dataItems).appendTo("#movieListBag"); )); $.ajax(( Cache: false, URL: " Templates/MovieTmpl.htm", Erfolg: ws.wrap("MovieTmpl", function (templateBody) ( $.template("movieTmpl", templateBody); )), Fehler: ws.wrap("MovieTmpl", function () ( Alert("Fehler beim Laden von MovieTmpl.htm!"); )) )); $.ajax(( Cache: false, URL: "Templates/ActorsTmpl.htm", Erfolg: ws.wrap("ActorsTmpl", Funktion (templateBody) ( $.template("actorsTmpl", templateBody); )), Fehler: ws.wrap("ActorsTmpl", function () ( alarm("Fehler beim Laden von ActorsTmpl.htm!"); )) )); ));
    Bitte beachten Sie, dass in diesem Fall die Vorlage SchauspielerTmpl namentlich aufgerufen (Datei Vorlagen\MovieTmpl.htm):

    Regisseur: $(director)
    Besetzung: ((tmpl(actors, ( last:actors )) „actorsTmpl“))
    Jahr: $(Jahr)

    Dynamisches Update Im letzten Abschnitt des Praxisteils zeige ich zwei weitere Arbeitsszenarien jQuery-Vorlagen- Ändern zugehöriger Daten und Ersetzen der zugehörigen Vorlage.

    Im folgenden Beispiel wurde für jeden Film die Möglichkeit hinzugefügt, seine Bewertung zu ändern (der vollständige Beispielcode befindet sich in der Datei). DynamicUpdate1.htm):

    ...
    Zugehöriger Code:

    $(function () ( $("#movieTmpl").tmpl(dataItems).appendTo("#movieListBag"); $("#movieListBag").delegate(".rating-button", "click", function ( ) ( var item = $.tmplItem(this); item.data.rating += parseInt($(this).attr("x-inc")); item.update(); )); ));
    Wie Sie sehen können, ist dieser Code dem Lesezeichen-Code aus dem Abschnitt „Transformation“ sehr ähnlich, nur habe ich bei der Arbeit mit Lesezeichen auf ein gemeinsames Objekt zugegriffen Sichtzustand, und hier arbeite ich mit Daten, die einer Vorlageninstanz zugeordnet sind.

    Im Browser sieht dieses Beispiel so aus:

    Das folgende Beispiel demonstriert die Ersetzung einer verknüpften Vorlage (der vollständige Beispielcode befindet sich in der Datei DynamicUpdate2.htm):

    ((tmpl „#movieMainTmpl“))

    [Mehr...]

    ((tmpl „#movieMainTmpl“))

    Standbilder aus dem Film:

    ((jeder Frame)) ((/jede))

    [Weniger...]


    Hier verwende ich zwei Vorlagen, movieShortTmpl Und movieFullTmpl, dessen allgemeiner Teil in der Vorlage enthalten ist movieMainTmpl.

    Zugehöriger Code:

    $(function () ( var shortTemplate = $("#movieShortTmpl").template("shortTemplate"); var fullTemplate = $("#movieFullTmpl").template(); $.tmpl("shortTemplate", dataItems). appendTo("#movieListBag"); $("#movieListBag").delegate(".more-details", "click", function () ( var item = $.tmplItem(this); item.tmpl = item.tmpl === shortTemplate ? fullTemplate: shortTemplate; item.update(); )); ));
    Ich denke, dieser Code bedarf einer weiteren Erklärung.

    Um eine Vorlage zu ersetzen, benötige ich einen Link zur kompilierten Vorlage. Ich erhalte diese Links über Anrufe .Vorlage(). Darüber hinaus, weil Probe kurze Vorlage Wird zum Rendern einer Liste von Filmen verwendet, nachdem die Seite geladen wurde. Ich speichere sie in einem Cache, damit ich sie anhand des Namens instanziieren kann.

    Im Browser sieht dieses Beispiel so aus:

    Fazit Der Code für die im Artikel verwendeten Beispiele kann über diesen Link heruntergeladen werden.

    Herunterladen jQuery-Vorlagen Sie können dies über die ASP.NET CDN-Website oder direkt über das GitHub-Repository tun:
    Brian Landau „Benchmarking von Javascript-Templating-Bibliotheken.“

    Abschließend möchte ich Vitaly Dilmukhametov und Denis Gladkikh für die wertvollen Kommentare danken, die sie während der Arbeit an dem Artikel gemacht haben.

    Tags: Tags hinzufügen



     

    Lesen:



    Ein iPhone nach dem Kauf einrichten So richten Sie ein iPhone SE nach dem Kauf ein

    Ein iPhone nach dem Kauf einrichten So richten Sie ein iPhone SE nach dem Kauf ein

    Trotz der Tatsache, dass Apple-Gadgets scheinbar den ganzen Planeten füllen, wächst die Zahl neuer iPhone-Nutzer täglich. Trotz...

    Die besten Möglichkeiten, einen schönen Hintergrund für Ihren YouTube-Kanal zu erstellen

    Die besten Möglichkeiten, einen schönen Hintergrund für Ihren YouTube-Kanal zu erstellen

    Erstellen Sie interessante Videoinhalte? Vergessen Sie nicht, Ihren Kanal schön zu gestalten! Die wichtigste Rolle bei der Gestaltung des Kanals spielt der sogenannte Header...

    Samsung-Smartphones auf Werkseinstellungen zurücksetzen

    Samsung-Smartphones auf Werkseinstellungen zurücksetzen

    Sehr oft ist es erforderlich, Ihr Android-Telefon zurückzusetzen. Dieses Verfahren ist recht einfach. Tippen Sie einfach ein paar Mal auf den Bildschirm ...

    Was ist Power BI und wie arbeitet man damit?

    Was ist Power BI und wie arbeitet man damit?

    Grüße, liebe Freunde, Anton Buduev ist bei euch. Mit diesem Artikel beginne ich, über ein sehr tiefes und wichtiges Thema für jeden von uns nachzudenken, nämlich ...
    Feed-Bild RSS