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

How to create your own HTML template using 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

dowiedz się więcej 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ł" } ]

Mamy dwa sposoby na stworzenie szablonu jQuery:

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

Sunny Saurabh

Sunny Saurabh

Sunny Saurabh is an experienced Software engineer in C# and ASP.NET as well as an expert as a PHP developer. He has also expert in database design, server maintenance and security. He has achieved this goal only in the short span of 3yrs and still looking forward to achieving more in the IT industry. He lives in New Delhi and his hobby to write the technical writeups.

Leave a Reply

Your email address will not be published. Required fields are marked *