极客教程什么是x-tmpl
x-tmpl阻止浏览器解释脚本的JavaScript。为了使用JQuery x-tmpl，我们需要jquery-tmpl JavaScript文件。jQuery.tmpl()方法连接了.appendTo, .prependTo, .insertAfter或.insertBefore方法。
语法:
tmpl([data], [options])
例如：
$("#myTemplate").tmpl(Data).appendTo("ul");
$.tmpl(template, [data], [options])(string containing markup,
HTML Element, or Name of named template)
例如：
$.tmpl("namedTemplate", Data).appendTo("ul");
示例:
$.tmpl( "<li>${Name}</li>", { "Name" : "GFG" }).appendTo( "#target" );
JQuery x-tmpl用于模板组成。
x-tmpl的使用（客户端）：
- 用npm安装blueimp-tmpl软件包。
npm install blueimp-tmpl
- 在HTML标记中包括JavaScript模板脚本。
<script src="js/tmpl.min.js"></script>
// Implementing them into the variables.
var template = '<p>Hello!</p>' ;
- 添加一个类型为 “text/x-tmpl “的脚本部分。
<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>
- 创建一个JavaScript对象来使用模板的数据。
var data = {
title: 'GFG',
geeky: {
name: 'GFG',
},
features: ['more content', 'powerful', 'zero dependencies']
}
- 调用tmpl()方法。
document.getElementById('result').innerHTML = tmpl('tmpl-demo', data)
x-tmpl的使用（服务器端）：
- 用NPM安装blueimp-tmpl软件包。
npm install blueimp-tmpl
- 添加一个文件template.html。
<!DOCTYPE HTML>
<title>GFG</title>
<h4>Features</h4>
<ul>
{% for (var i=0; i<o.features.length; i++) { %}
<li>{%=o.features[i]%}</li>
{% } %}
</ul>
- 添加一个文件server.js 。
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/')
- 运行该应用程序。
node server.js
例子：一个简单的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>
现在，让我们用所需的输出来实现上述代码。
<!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>
示例 2:
<!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>
输出:
