Jak stworzyć własny szablon HTML za pomocą jQuery?

Ten artykuł dotyczy tworzenia szablonu HTML za pomocą jQuery.

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ł" } ]

1. 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&quot;>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js&quot;&gt;&lt;/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.

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