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