下划线中的外部模板
我使用Underscore template。可以将外部文件附加为模板
在Backbone View中，我有：
textTemplate: _.template( $('#practice-text-template').html() ),
initialize: function(){
this.words = new WordList;
this.index = 0;
this.render();
},在我的html中是：
<script id="practice-text-template" type="text/template">
<h3>something code</h3>
</script>它工作得很好。但是我需要外部模板。我试着：
<script id="practice-text-template" type="text/template" src="templates/tmp.js">或
textTemplate: _.template( $('#practice-text-template').load('templates/tmp.js') ),或
$('#practice-text-template').load('templates/tmp.js', function(data){ this.textTemplate = _.template( data ) })但它并没有起作用。
回答 12
Stack Overflow用户
发布于 2011-12-05 01:58:59
EDIT:这个答案已经过时了。我会删除它，但它是“接受”的答案。我将转而发表我的观点。
我不再主张这样做了。相反，我会将所有模板分离到单独的HTML文件中。有些人建议以异步方式加载这些文件(Require.js或某种模板缓存)。这在小项目上效果很好，但在有很多模板的大型项目中，你会发现自己在页面加载时发出了大量的小型异步请求，这是我真的不喜欢的。(呃...好的，您可以通过使用r.js预编译初始依赖项来使用Require.js绕过这个问题，但是对于模板，我仍然觉得这是错误的)
我喜欢使用grunt任务(grunt contrib-jst)将所有的模板编译成一个单独的templates.js文件并包含在内。你得到了世界上最好的东西。模板存在于一个文件中，所述模板的编译发生在构建时(而不是运行时)，并且在页面启动时不会有100个微小的异步请求。
下面的一切都是垃圾
对我来说，我更喜欢在模板中包含JS文件的简单性。因此，我可能会创建一个名为view_template.js的文件，其中包含作为变量的模板：
app.templates.view = " \
<h3>something code</h3> \
";然后，它就像包含一个普通的脚本文件一样简单，然后在视图中使用它：
template: _.template(app.templates.view)更进一步，我实际上使用了coffeescript，所以我的代码看起来更像这样，并且避免了行尾转义字符：
app.templates.view = '''
<h3>something code</h3>
'''使用这种方法可以避免在不必要的情况下引入require.js。
Stack Overflow用户
发布于 2012-04-13 15:38:11
这里有一个简单的解决方案：
var rendered_html = render('mytemplate', {});
function render(tmpl_name, tmpl_data) {
if ( !render.tmpl_cache ) {
render.tmpl_cache = {};
}
if ( ! render.tmpl_cache[tmpl_name] ) {
var tmpl_dir = '/static/templates';
var tmpl_url = tmpl_dir + '/' + tmpl_name + '.html';
var tmpl_string;
$.ajax({
url: tmpl_url,
method: 'GET',
dataType: 'html', //** Must add
async: false,
success: function(data) {
tmpl_string = data;
}
});
render.tmpl_cache[tmpl_name] = _.template(tmpl_string);
}
return render.tmpl_cache[tmpl_name](tmpl_data);
}在这里使用"async: false“并不是一种坏方法，因为在任何情况下，您都必须等待模板加载完成。
因此，"render“函数
- 允许你将每个模板存储在单独的html文件中的静态目录中，并且缓存templates
- abstracts模板加载逻辑，
- 非常lightweight
- compiles。例如，将来您可以使用预加载和预编译的模板。
- 易于使用
我正在编辑答案，而不是留下评论，因为我相信这很重要。
如果模板没有出现在原生应用程序中，而您看到了HIERARCHY_REQUEST_ERROR: DOM Exception 3，请查看Dave Robinson to What exactly can cause an "HIERARCHY_REQUEST_ERR: DOM Exception 3"-Error?的answer。
基本上，您必须添加
dataType: 'html'发送到$.ajax请求。
Stack Overflow用户
发布于 2013-11-04 18:58:27
这个mixin允许你使用下划线以非常简单的方式呈现外部模板：_.templateFromUrl(url, [data], [settings])。方法接口与下划线的 _.template()几乎相同。包括缓存。
_.mixin({templateFromUrl: function (url, data, settings) {
var templateHtml = "";
this.cache = this.cache || {};
if (this.cache[url]) {
templateHtml = this.cache[url];
} else {
$.ajax({
url: url,
method: "GET",
async: false,
success: function(data) {
templateHtml = data;
}
});
this.cache[url] = templateHtml;
}
return _.template(templateHtml, data, settings);
}});用法：
var someHtml = _.templateFromUrl("http://example.com/template.html", {"var": "value"});https://stackoverflow.com/questions/8366733
复制相似问题