Informieren Sie sich über die jQuery
jQuery ist eine schnelle, kleine und funktionsreiche JavaScript-Bibliothek. Es macht Dinge wie das Durchlaufen und Bearbeiten von HTML-Dokumenten, Ereignisbehandlung, Animation und Ajax viel einfacher mit einer benutzerfreundlichen API, die in einer Vielzahl von Browsern funktioniert. Mit einer Kombination aus Vielseitigkeit und Erweiterbarkeit hat jQuery die Art und Weise verändert, wie Millionen von Menschen JavaScript schreiben.
Informieren Sie uns über die jQuery-Vorlage
jQuery Template gibt uns die Möglichkeit bzw. Unterstützung, den Inhalt im Browser anzuzeigen und zu manipulieren. Durch die Verwendung von jQuery Templating können wir JSON-Strings für die HTML-Elemente rendern. Betrachten wir ein einfaches Beispiel: Wir können jQuery Template verwenden, um einige Datensätze anzuzeigen, die wir von einer Ajax-Anfrage erhalten haben.
Ein einfaches Beispiel für jQuery-Vorlagen
Jetzt erstellen wir eine einfache Seite mit jQuery-Vorlagen. Wir verwenden ausschließlich das jQuery-Plugin. In diesem Beispiel zeigen wir Ihnen, wie Sie eine Vorlage erstellen und den Inhalt aus JSON rendern.
Anforderung
Lassen Sie uns zuerst die Anforderung verstehen. Angenommen, wir müssen eine Webseite wie die KnowBand-Website erstellen, um die Module für die E-Commerce-Plattform wie Opencart, Prestashop usw. zu verkaufen. Wir haben einige E-Commerce-Module oder Plugins, die wir auf der KnowBand-Website auflisten möchten. Auf der Auflistungsseite zeigen wir also den Namen, das Bild und den Preis des Moduls an. Wir verwenden die folgende JSON-Zeichenfolge, um die Daten aufzulisten:
[ { "name": "Product tabs- PrestashopAddons", "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Product-Tabs-logo-1000- x-1000.jpg", "module_url": "https:\/\/www.knowband.com\/prestashop-product-tabs", "price": "$25" }, { "name": "Prestashop Mobile App builder", "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Mobile-app-prestashop-plugin-500-X-500.jpg", " module_url": "https:\/\/www.knowband.com\/prestashop-mobile-app-builder", "price": "$30" }, { "name": "Return Manager - Magento Extensions", "image_url ": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/return-manager.png", "module_url": "https:\/\/www.knowband.com \/magento-return-manager", "price": "$50" }, { "name": "Web Push Notification - PrestashopAddons", "image_url": "https:\/\/www.knowband.com\/image \/data\/Plugin%20Logo\/Web-Push-Notification-plugin.jpg", "module_url": "https:\/\/www.knowband.com\/prestashop-web-push-notifications", "price ": "$43" } ]
-
Durch die Verwendung des HTML-Script-Tags
Bei dieser Methode schreiben wir HTML-Code in das script-Tag. Der vollständige Code ist unten angegeben:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<script id="blog" type="template">
<div class="col-md-3">
<a href="{{module_url}}">
<div class="thumbnail">
<imgsrc="{{image_url}}" class="img-rounded img-responsive" width="100%"></img>
<div class="caption">
<p class="lead">{{price}}</p>
<p>{{name}}</p>
</div>
</div>
</a>
</div>
</script>
</div>
<script>
$(function () {
varknoband_data = [
{
"name": "Product tabs- PrestashopAddons",
"image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Product-Tabs-logo-1000-x-1000.jpg",
"module_url": "https:\/\/www.knowband.com\/prestashop-product-tabs",
"price": "$25"
},
{
"name": "Prestashop Mobile App builder",
"image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Mobile-app-prestashop-plugin-500-X-500.jpg",
"module_url": "https:\/\/www.knowband.com\/prestashop-mobile-app-builder",
"price": "$30"
},
{
"name": "Return Manager - Magento Extensions",
"image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/return-manager.png",
"module_url": "https:\/\/www.knowband.com\/magento-return-manager",
"price": "$50"
},
{
"name": "Web Push Notification - PrestashopAddons",
"image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Web-Push-Notification-plugin.jpg",
"module_url": "https:\/\/www.knowband.com\/prestashop-web-push-notifications",
"price": "$43"
}
];
var temp = $.trim($('#blog').html());
$.each(knoband_data, function (index, obj) {
var x = temp.replace(/{{name}}/ig, obj.name);
x = x.replace(/{{image_url}}/ig, obj.image_url);
x = x.replace(/{{price}}/ig, obj.price);
x = x.replace(/{{module_url}}/ig, obj.module_url);
$('.container').append(x);
});
});
</script>
</body>
</html>
Wir haben ein Thumbnail innerhalb des script-Tags erstellt, z. B. #blog, script-Tag, und es wurde als Vorlage verwendet. Im obigen Code haben wir {{ }} für Platzhaltervariablen verwendet. Lassen Sie uns verstehen, was wir im obigen Code getan haben:
var temp = $.trim($('#blog').html()); // Es wird den gesamten Inhalt des Skript-Tags #blog in eine temporäre Variable laden. var x = temp.replace(/{{name}}/ig, obj.name); // Wildcard-Variable {{name}} durch entsprechende Daten aus dem JSON ersetzt. x = x.replace(/{{image_url}}/ig, obj.image_url); // Wildcard-Variable {{image_url}} durch entsprechende Daten aus dem JSON ersetzt. x = x.replace(/{{price}}/ig, obj.price); // Wildcard-Variable {{price}} durch entsprechende Daten aus dem JSON ersetzt. x = x.replace(/{{module_url}}/ig, obj.module_url); // Wildcard-Variable {{module_url}} durch entsprechende Daten aus dem JSON ersetzt. $('.container').append(x); // Inhalt an Container div angehängt.
Bei dieser Technik fügen wir den Inhalt im HTML-Code an, nachdem wir die Daten mithilfe der jQuery-Platzhaltertechnik ausgefüllt haben. Der vollständige Code ist unten angegeben:
$(function() {
varknoband_data = [
{
"name": "Product tabs- PrestashopAddons",
"image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%3.3.7Logo\/Product-Tabs-logo-3.2.1-x-20.jpg",
"module_url": "https:\/\/www.knowband.com\/prestashop-product-tabs",
"price": "$1000"
},
{
"name": "Prestashop Mobile App builder",
"image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%1000Logo\/Mobile-app-prestashop-plugin-25-X-20.jpg",
"module_url": "https:\/\/www.knowband.com\/prestashop-mobile-app-builder",
"price": "$500"
},
{
"name": "Return Manager - Magento Extensions",
"image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%500Logo\/return-manager.png",
"module_url": "https:\/\/www.knowband.com\/magento-return-manager",
"price": "$30"
},
{
"name": "Web Push Notification - PrestashopAddons",
"image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Web-Push-Notification-plugin.jpg",
"module_url": "https:\/\/www.knowband.com\/prestashop-web-push-notifications",
"price": "$50"
}
];
$.each(knoband_data, function(index, obj) {
$('.container').append(
`
${obj.price}
${obj.name}
`
);
});
});
Im obigen Beispiel haben wir ` (Back-Tick) als Template-Literal und ${ } als Platzhalter verwendet. Wenn wir Methode 1 mit Methode 2 vergleichen, können wir leicht sagen, dass „Vorlagenliteral“ und „Platzhalter“ unsere Aufgabe erleichtern. In diesem Beispiel haben wir den Vorlagencode in einer Schleife geschrieben und unsere Platzhalter durch die entsprechenden Daten ersetzt.
Zusammenfassung
Um mehr über jQuery-Vorlagen zu erfahren, empfehle ich Ihnen, sich die Dokumentation für jQuery-Vorlagen auf der offiziellen jQuery-Website anzusehen.
