Poinformujmy o jQuery
jQuery to szybka, mała i bogata w funkcje biblioteka JavaScript. Sprawia, że takie rzeczy jak przechodzenie i manipulacja dokumentami HTML, obsługa zdarzeń, animacja i Ajax są znacznie prostsze dzięki łatwemu w użyciu interfejsowi API, który działa w wielu przeglądarkach. Dzięki połączeniu wszechstronności i rozszerzalności jQuery zmienił sposób, w jaki miliony ludzi piszą JavaScript.
Powiadommy o szablonie jQuery
Szablon jQuery daje nam możliwość lub wsparcie wyświetlania i manipulacji treścią w przeglądarce. Korzystając z szablonów jQuery, możemy renderować ciąg JSON do elementów HTML. Rozważmy prosty przykład, możemy użyć szablonu jQuery do wyświetlenia pewnego zestawu rekordów, które otrzymaliśmy z żądania Ajax.
Podstawowy przykład szablonów jQuery
Teraz tworzymy prostą stronę używając szablonów jQuery. Będziemy używać tylko wtyczki jQuery. W tym przykładzie pokażemy, jak utworzyć szablon i wyrenderować zawartość z JSON.
Wymaganie
Najpierw zrozumiemy wymaganie. Załóżmy, że musimy stworzyć stronę internetową, taką jak witryna KnowBand, aby sprzedawać moduły dla platformy e-commerce, takiej jak Opencart, Prestashop itp. Mamy kilka modułów lub wtyczek e-commerce, które chcemy umieścić na stronie KnowBand. Tak więc na stronie z listą pokażemy nazwę, obraz i cenę modułu. Do wylistowania danych użyjemy poniższego ciągu JSON:
[ { "name": "Zakładki produktów- 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 USD" }, { "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 - Rozszerzenia Magento", "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": "Powiadomienie Web Push - 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", "cena ": "43 zł" } ]
-
Używając tagu skryptu HTML
W tej metodzie napiszemy kod HTML w tagu script. Pełny kod znajduje się poniżej:
<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>
Stworzyliśmy�miniaturkę wewnątrz tagu skryptu, czyli #blog�tagu, który posłużył jako szablon. W powyższym kodzie użyliśmy {{ }} dla zmiennych wieloznacznych. Rozumiemy właściwie, co zrobiliśmy w powyższym kodzie:
var temp = $.trim($('#blog').html()); // Załaduje całą zawartość tagu skryptu #blog w zmiennej tymczasowej. var x = temp.replace(/{{nazwa}}/ig, nazwa.obiektu); // Zastąp zmienną wieloznaczną {{name}} odpowiednimi danymi z JSON. x = x.replace(/{{image_url}}/ig, obj.image_url); // Zastąp zmienną wieloznaczną {{image_url}} odpowiednimi danymi z JSON. x = x.replace(/{{cena}}/ig, obj.cena); // Zastąp zmienną wieloznaczną {{price}} odpowiednimi danymi z JSON. x = x.replace(/{{module_url}}/ig, obj.module_url); // Zastąp zmienną wieloznaczną {{module_url}} odpowiednimi danymi z JSON. $('.kontener').append(x); // dołączył zawartość do kontenera div.
-
Korzystając z techniki zastępczej
W tej technice dodamy zawartość w kodzie HTML po wypełnieniu danych przy użyciu techniki zastępczej jQuery. Pełny kod znajduje się poniżej:
$(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}
`
);
});
});
W powyższym przykładzie użyliśmy ` (wstecz) jako literału szablonu�i ${ } jako symbolu zastępczego. Porównując metodę 1 z metodą 2, możemy łatwo powiedzieć „dosłowny szablon”, a symbol zastępczy ułatwia nam zadanie. W tym przykładzie napisaliśmy kod szablonu w pętli i zastąpiliśmy nasze symbole zastępcze odpowiednimi danymi.
Podsumowanie
Aby dowiedzieć się więcej o szablonach jQuery, polecam zajrzeć do dokumentacji szablonów jQuery na oficjalnej stronie jQuery.