Vamos saber sobre o jQuery
jQuery é uma biblioteca JavaScript rápida, pequena e rica em recursos. Ele torna as coisas como a passagem e manipulação de documentos HTML, manipulação de eventos, animação e Ajax muito mais simples com uma API fácil de usar que funciona em vários navegadores. Com uma combinação de versatilidade e extensibilidade, o jQuery mudou a maneira como milhões de pessoas escrevem JavaScript.
Vamos conhecer o template jQuery
jQuery Template nos dá uma opção ou suporte para exibição e manipulação do conteúdo no navegador. Usando o jQuery Templating podemos renderizar a string JSON para os elementos HTML. Vamos considerar um exemplo simples, podemos usar o jQuery Template para exibir algum conjunto de registros que obtivemos de uma solicitação do Ajax.
Um exemplo básico de templates jQuery
Agora criamos uma página simples usando modelos jQuery. Usaremos apenas o plugin jQuery. Neste exemplo, mostraremos como criar um modelo e renderizar o conteúdo do JSON.
Exigência
Vamos entender o requisito primeiro. Suponha que tenhamos que criar uma página web como o site KnowBand para vender os módulos para a plataforma de e-commerce como Opencart, Prestashop etc. Temos alguns módulos ou plugins de e-commerce que queremos listar no site KnowBand. Assim, na página de listagem, mostraremos o nome, a imagem e o preço do módulo. Usaremos a string JSON abaixo para listar os dados:
[ { "name": "Guias de produtos- 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" } ]
-
Usando a Tag de Script HTML
Neste método, escreveremos o código HTML na tag script. O código completo é dado abaixo:
<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>
Criamos uma miniatura dentro da tag script, ou seja, a tag script #blog e ela foi usada como modelo. No código acima, usamos {{ }} para variáveis curinga. Vamos entender de fato o que fizemos no código acima:
var temp = $.trim($('#blog').html()); // Ele carregará todo o conteúdo da tag de script #blog em uma variável temporária. var x = temp.replace(/{{nome}}/ig, obj.nome); // Substituiu a variável curinga {{name}} pelos dados correspondentes do JSON. x = x.replace(/{{image_url}}/ig, obj.image_url); // Substituiu a variável curinga {{image_url}} pelos dados correspondentes do JSON. x = x.substituir(/{{preço}}/ig, obj.preço); // Substituiu a variável curinga {{price}} pelos dados correspondentes do JSON. x = x.replace(/{{module_url}}/ig, obj.module_url); // Substituiu a variável curinga {{module_url}} pelos dados correspondentes do JSON. $('.container').append(x); // anexou o conteúdo ao container div.
Nesta técnica, anexaremos o conteúdo no HTML após preencher os dados usando a técnica de espaço reservado do jQuery. O código completo é dado abaixo:
$(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}
`
);
});
});
No exemplo acima, usamos ` (back-tick) como literal de modelo�e ${ } como um espaço reservado. Quando comparamos o método 1 com o método 2, podemos facilmente dizer que o modelo literal e o espaço reservado facilitam nossa tarefa. Neste exemplo, escrevemos o código do modelo em um loop e substituímos nossos espaços reservados por seus dados correspondentes.
Resumo
Para saber mais sobre jQuery Templates, recomendo que você veja a documentação de jQuery Templates no site oficial do jQuery.
