是否可以将 jsRender 模板存储在单独的文件中？
我想将它存储在一个单独的文件中，并在我的页面中引用它。
类似的东西
<script id="templateName" type="text/x-jsrender" src="thisIsTheTemplate.js"></script>
我会感谢任何意见或建议。
谢谢
【问题讨论】：
标签： jsrender
是的，你可以做到这一点（我每次都用这个）。
假设您的模板位于template 文件夹中，并且它被调用，例如_productDetails.tmpl.html
在您的页面中，您使用 jQuery $.get() 将其拉取并加载到模板中，例如：
var renderExternalTmpl = function(item) {
var file = '../templates/_' + item.name + '.tmpl.html';
$.when($.get(file))
.done(function(tmplData) {
$.templates({ tmpl: tmplData });
$(item.selector).html($.render.tmpl(item.data));
});
}
你传递一个对象itemwitch 将包含所有 3 个属性，例如：
renderExternalTmpl({ name: 'productDetails', selector: '#items', data: {} })
你可以有一个很好的 utilities 类来保存所有这些：
var my = my || {};
my.utils = (function() {
var getPath = function(name) {
return '../templates/_' + name + '.tmpl.html';
},
renderExtTemplate = function(item) {
var file = getPath( item.name );
$.when($.get(file))
.done(function(tmplData) {
$.templates({ tmpl: tmplData });
$(item.selector).html($.render.tmpl(item.data));
});
};
return {
getPath: getPath,
renderExtTemplate: renderExtTemplate
};
});
您可以轻松拨打my.utils.renderExtTemplate(item);
【讨论】：
cache: true，这样您就不需要每次请求都发送它。
<script> 元素的src 属性不起作用（例如，<script src="_productDetails.tmpl.html" type="text/x-jsrender" id="myTemplate"></script>）？那将是如此干净、美丽和直观。
我最近自己也遇到了这个问题。在查看了 jsRender 代码并研究了其他 javascript 库之后，我决定编写自己的库来简化加载外部模板，以便可以使用 <link> 标签将模板附加到 html 页面，并通过简单地包含 . .js 文件。如果您想查看它，我已经在 github 上发布了代码并附有示例：
https://github.com/stevenmhunt/tmpl.loader
该库与 jsRender 以及任何能够处理模板的代码一起使用。
享受吧！
【讨论】：
这是我编写的一个函数，用于一次加载一个或多个外部模板。它还缓存模板，因此如果已经加载了模板，它将不会再次加载。
function loadTemplates() {
var toLoad = [],
loadAll = $.Deferred();
$.each(arguments, function(i, templateName) {
var filepath = '/path/to/templates/' + templateName + '.html',
loadTemplate = $.Deferred();
toLoad.push(loadTemplate);
if ($.templates[templateName]) {
loadTemplate.resolve();
} else {
$.get(filepath , function(html) {
var newTemplate = {};
newTemplate[templateName] = html;
$.templates(newTemplate);
}).fail(function() {
throw 'Could not load template at '+filepath;
}).done(function() {
loadTemplate.resolve();
});
}
})
$.when.apply($, toLoad).done(function() {
loadAll.resolve();
});
return loadAll;
}
像这样使用它：
loadTemplates('modal','itemDetail', 'itemsList').done(function() {
// do stuff when all templates are loaded
$('#viewItemDetail').on('click',function() {
$.render.itemDetail({
id:'123',
name:'Cool Thing',
description:'This thing is really cool.'
});
});
});
【讨论】：
如果您像我一样尝试从本地文件加载外部模板，让我为您省去一些麻烦。
不要按照 balexandre 的回答中的建议使用 jQuery $.get()。
使用$.ajax()，并设置async: true和dataType: text，否则会报错：elem.getAttribute is not a function。
详情请参阅我对Error when loading jsrender templates through AJAX 的回复。
【讨论】：
根据我的经验，您不需要处理这个问题，您只需在使用之前将模板附加到页面即可。见下面的代码。
<div id="all_template"></div>
<script>
var file = '/tmpl/all.tmpl.html';
$.ajax({
url: file,
async: false,
type : "GET",
dataType: 'text',
cache: true,
success: function(contents)
{
$("#all_template").append(contents);//append all your template to the div
}
});
</script>
<script>
var data = {};
$('#js-template').render(data);//use it as the same old way
</script>
这样就不用每次渲染js模板时都请求ajax文件了
【讨论】：