Was ist x-tmpl?
Das x-tmpl hindert den Browser daran, das Skript-JavaScript zu interpretieren. Um JQuery x-tmpl zu verwenden, benötigen wir die JavaScript-Datei jquery-tmpl. Die Methode jQuery.tmpl() verkettet die Methoden .appendTo, .prependTo, .insertAfter oder .insertBefore.
Syntax:
tmpl([data], [options])
Z.B:
$("#myTemplate").tmpl(Data).appendTo("ul");
$.tmpl(template, [data], [options])(string containing markup, HTML Element, or Name of named template)
Z.B:
$.tmpl("namedTemplate", Data).appendTo("ul");
Beispiel:
$.tmpl( "<li>${Name}</li>", { "Name" : "GFG" }).appendTo( "#target" );
JQuery x-tmpl wird für die Template-Komposition verwendet.
Verwendung von x-tmpl ( Client-seitig ) :
- Installieren Sie das Paket blueimp-tmpl mit npm:
npm install blueimp-tmpl
- Skript für JavaScript-Vorlagen in HTML-Markup einschließen:
<script src="js/tmpl.min.js"></script> // Implementing them into the variables. var template = '<p>Hello!</p>' ;
- Fügen Sie einen Skriptabschnitt mit dem Typ „text/x-tmpl“ hinzu:
<script type="text/x-tmpl" id="tmpl-demo"> <h3>GFG}</h3> <h4>Features</h4> <ul> {% for (var i=0; i<o.features.length; i++) { %} <li>{%=o.features[i]%}</li> {% } %} </ul> </script>
- Erstellen Sie ein JavaScript-Objekt, um Daten für die Vorlage zu verwenden:
var data = { title: 'GFG', geeky: { name: 'GFG', }, features: ['more content', 'powerful', 'zero dependencies'] }
- Rufen Sie die Methode tmpl() auf:
document.getElementById('result').innerHTML = tmpl('tmpl-demo', data)
Verwendung von x-tmpl ( serverseitig ) :
- Installieren Sie das Paket blueimp-tmpl mit NPM:
npm install blueimp-tmpl
- Fügen Sie eine Datei template.html hinzu:
<!DOCTYPE HTML> <title>GFG</title> <h4>Features</h4> <ul> {% for (var i=0; i<o.features.length; i++) { %} <li>{%=o.features[i]%}</li> {% } %} </ul>
- Fügen Sie eine Datei server.js hinzu:
require('http') .createServer(function (req, res) { var fs = require('fs'), tmpl = require('./tmpl'), data = { title: 'JavaScript Templates', url: 'https://github.com/blueimp/JavaScript-Templates', features: ['more content', 'powerful', 'zero dependencies'] } tmpl.load = function (id) { var filename = id + '.html' console.log('Loading ' + filename) return fs.readFileSync(filename, 'utf8') } res.writeHead(200, { 'Content-Type': 'text/x-tmpl' }) res.end(tmpl('template', data)) }) .listen(8080, 'localhost') console.log('Server running at http://localhost:8080/')
- Führen Sie die Anwendung aus:
node server.js
Beispiel: Ein einfaches Beispiel für x-tmpl.
<script type='text/x-jquery-tmpl' id='person-template'> <div class='person'> <strong>Name: </strong> ${ Name } <br/> <strong>Age: </strong> ${ Age } <br/> <strong>Country: </strong> ${ Country } <br/> </div> </script>
Lassen Sie nun den obigen Code mit der erforderlichen Ausgabe implementieren:
HTML
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <script src= "http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"> </script> <body> <h3>Employee Details</h3> <div class="emp-detais"></div> </body> <script type="text/x-jquery-tmpl" id="emp-template"> <div class='person'> <strong>Name:</strong> ${ Name } <br /> <strong>Skills: </strong><br /> {{each Skills}} ${Skill} <br /> {{/each}} </div> </script> </body> </html>
Beispiel 2:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR /xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Template Caching</title> <link href="6_Site.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>Products</h1> <div id="productContainer"></div> <button id="more">More</button> <script type="text/javascript" src= "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.js"> </script> <script type="text/javascript" src= "http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"> </script> <script type="text/javascript"> // Globals var pageIndex = 0; // Create an array of products var products = []; for (var i = 0; i < 100; i++) { products.push({ name: "Product " + (i + 1) }); } // Get the remote template $.get("ProductTemplate.htm", null, function (productTemplate) { // Compile and cache the template $.template("productTemplate", productTemplate); // Render the products renderProducts(0); }); $("#more").click(function () { pageIndex++; renderProducts(); }); function renderProducts() { // Get page of products var pageOfProducts = products.slice(pageIndex * 5, pageIndex * 5 + 5); // Used cached productTemplate to render products $.tmpl("productTemplate", pageOfProducts) .appendTo("#productContainer"); } function formatPrice(price) { return "$" + price.toFixed(2); } </script> </body> </html>
Ausgabe: