如何在 dot.js 中使用 html 文件和部分视图模板
how to use html files and partial view templates in dot.js
我正在使用 doT.js 作为模板引擎,我需要使用 html 文件作为部分视图模板。有什么方法可以为模板传递 url 而不是 html 字符串?
我找不到关于此的任何文档,但使用 XHR 请求读取 HTML 文件并作为模板字符串传递给它很容易:
假设您有一种获取 HTML 文件内容的方法
function getPartialView (template) {
// Return a new promise.
return new Promise(function(resolve, reject) {
// Do the usual XHR stuff
var req = new XMLHttpRequest();
req.open('GET', "/templates/" + template + ".html", true);
// req.setRequestHeader('Content-Type', 'Application/JSON');
req.onreadystatechange = function() {
if (req.readyState != 4 || req.status != 200) return;
// This is called even on 404 etc
// so check the status
resolve(req.responseText);
};
// Handle network errors
req.onerror = function() {
reject(Error("Network Error"));
};
// Make the request
req.send();
});
}
然后你就可以在你的模板生成器中使用它了:
getPartialView('myTemplate').then(function (result) {
// getting the template
var pagefn = doT.template(result, settings);
// appending to view
// data is the real data you want to render the template for
document.querySelector('#mayTemplateWrapper').innerHTML = pagefn(data);
});
我正在使用 doT.js 作为模板引擎,我需要使用 html 文件作为部分视图模板。有什么方法可以为模板传递 url 而不是 html 字符串?
我找不到关于此的任何文档,但使用 XHR 请求读取 HTML 文件并作为模板字符串传递给它很容易:
假设您有一种获取 HTML 文件内容的方法
function getPartialView (template) {
// Return a new promise.
return new Promise(function(resolve, reject) {
// Do the usual XHR stuff
var req = new XMLHttpRequest();
req.open('GET', "/templates/" + template + ".html", true);
// req.setRequestHeader('Content-Type', 'Application/JSON');
req.onreadystatechange = function() {
if (req.readyState != 4 || req.status != 200) return;
// This is called even on 404 etc
// so check the status
resolve(req.responseText);
};
// Handle network errors
req.onerror = function() {
reject(Error("Network Error"));
};
// Make the request
req.send();
});
}
然后你就可以在你的模板生成器中使用它了:
getPartialView('myTemplate').then(function (result) {
// getting the template
var pagefn = doT.template(result, settings);
// appending to view
// data is the real data you want to render the template for
document.querySelector('#mayTemplateWrapper').innerHTML = pagefn(data);
});