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( "${Name} ", { "Name" : "GFG" }).appendTo( "#target" );
JQuery x-tmpl 用于模板组合。
x-tmpl 的用法（客户端） ：
- 使用 npm 安装 blueimp-tmpl 包：
npm install blueimp-tmpl- 在 HTML 标记中包含 JavaScript 模板脚本：
// Implementing them into the variables.
var template = 'Hello!
' ;- 添加一个类型为“text/x-tmpl”的脚本部分：
- 创建一个 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：
GFG
Features
{% for (var i=0; i{%=o.features[i]%}
{% } %}
- 添加文件 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 的简单示例。
现在，让我们用所需的输出来实现上面的代码：
HTML
Page Title
Employee Details
HTML
Template Caching
Products
示例 2：
HTML
Template Caching
Products
输出：
