JQuery Vorlage: jQuery Vorlagen-Vorschlag

Einführung (Einführung)

Dieser Vorschlag wird beschrieben, wie jQuery Kernbibliothek Vorlagenunterstützung hinzu. Mehr beschreibt insbesondere der Vorschlag eine neue jQuery-Methode genannt (Rendern), ermöglicht es Ihnen, ein Javascript-Objekt und ein Javascript-Array als Vorlage mit einem Stück des HTML-Codes zu machen.

Der Vorschlag soll Plugin-Entwickler zu erklären und Vorlagen mit Standardmethoden zu rendern. Es ist eine Standardmethode für die Anmeldung und Rendern von Vorlagen, die für alle von Vorteil ist:

• Plugin-Entwickler können reichen, datengesteuerte Plug-ins, wie das DataGrid-Plug-in erstellen. Plugin-Entwickler bauen-Plugins basierend auf jQuery die Core-Bibliothek-Support für Vorlagen, so dass jedes Mal, wenn Sie ein neues entwickeln Plug-in, können Sie vermeiden, erneut bestätigt das Render-Template-Code.
• Plug-in-Benutzer können eine standard-Syntax Erklärung Vorlage nutzen. Plug-in-Benutzer müssen nicht lernen eine neue Methode jedes Mal, wenn sie eine Vorlage erstellen, beginnend mit dem Einsatz eines neuen Plug-in-jedes Mal.

Der Vorschlag ist in zwei Hauptteile gegliedert. Der erste Teil enthält einen kurzen Überblick über bestehende Vorlage Lösungen, und der zweite Teil ist unsere Empfehlung zu erklären und zu rendern, wie eine Vorlage der Core-Bibliothek jQuery hinzugefügt wird.

Vorhandene Vorlage Lösungen

Mittlerweile gibt es viele JavaScript-Lösung-Vorlagen, und in dieser Hinsicht standardisierte Vorlage Lösungen sind verpflichtet, den Trend zu sein. In diesem Abschnitt bieten wir Ihnen eine kurze Beschreibung der vier beliebtesten und interessantesten Vorlagen. Was löst bestehende Vorlage Lösungen? Diese Funktionen sinnvoll in der jQuery-Kern.

Mikro-Vorlagen

John Resig Miniatur-Template-Engine ist sehr klein (nur 2 KB unkomprimiert). Jedoch hat dieses kleine Stück Code die Kernfunktionalität der Erbringung einer Vorlage erfasst.

Folgendes ist ein Beispiel für ein Einzelobjekt JavaScript-Produkt mit einem Mikro-Template-Engine anzeigen.

≪ Script Src = ". /JQuery-1.4.1.js "Type =" Text/Javascript "
≪ Script Src = "MicroTemplating.js" Type = "Text/Javascript"
≪ Script Type = "Text/Javascript"
Var Produkt = {Name: "Laptop", Preis: 788.67};
$ (ShowProduct);
Funktion ShowProduct () {}
$ ("#Results"). HTML (Tmpl ("Producttemplate", Produkt);
}
Funktion FormatPrice (Preis) {}
"$" + Preis zurück;
}
das

Tmpl ()-Methode wird verwendet, um eine Zeichenfolge aus einer Produktvorlage und Product-Objekt zu erzeugen. Das Ergebnis ist die InnerHTML ein DIV-Element namens Ergebnisse zugewiesen.

Die Produktvorlage ist im Skript Seite Körper definiert.

≪ Script Type = "Text/html" Id = "ProductTemplate"
Produktname: < % = Name% >
≪ Br / >
Produktpreis: < % = FormatPrice (Preis) % >
das
≪ Div-Id = "Ergebnisse"

Beachten Sie, dass die Type-Eigenschaft des Skripts "Text/html". Deklarieren einen Web-Browser auf diese Weise ignoriert den Inhalt des Skripts und seinen Inhalt als Zeichenfolgen behandelt.

Beachten Sie, dass die Vorlage Ausdrücke enthält, die Produktnamen und Preis Attribute darstellen. Rufen Sie JavaScript FormatPrice ()-Methode um den Preis des Produkts zu formatieren. In der Vorlage können Sie eine JavaScript-Funktion aufrufen.

Hier ist ein Beispiel des wie ein Array von Product-Objekten gerendert werden soll:

Funktion Ausstellungsprodukte () {}
Analysieren der Vorlage
Var Vorlage = Tmpl ("ProductTemplate");
Durchlaufen Sie die
Var Ergebnisse = ";
Für (Var ich = 0; I, products.length; i ++) {}
Ergebnisse += Vorlage (Products[i]);
}
Die Ergebnisse zeigen
$ ("#Results"). HTML (Ergebnisse);
}

Die Tmpl ()-Funktion unterstützt currying (für welche currying, Sie die Daten online zugreifen können). Wenn keine Daten zu den Tmpl ()-Funktion bereitgestellt werden, kehrt er zurück, eine JavaScript-Funktion, die die analysierte Vorlage darstellt.

In den obigen Code die Vorlage wird analysiert, und dann wird eine Zeichenfolge für jede Produkt-Call-Vorlage-Methode generiert. Zu guter Letzt ist die Zeichenfolge der InnerHTML des DIV-Elements namens Ergebnisse zugewiesen.