Wie erstelle ich mit jQuery ein eigenes HTML-Template?

In diesem Artikel geht es um das Erstellen von HTML-Vorlagen mit jQuery.

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

Wir haben zwei Möglichkeiten, eine jQuery-Vorlage zu erstellen:

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

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.
  1. Durch die Verwendung der Platzhaltertechnik

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.

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 *