javascript underscore.js 和backbone.js 的外部 html 模板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9834714/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
external html template for underscore.js and backbone.js
提问by jongbanaag
Can i put my template on a separate .html files and just reference them in my index.html?
我可以将我的模板放在单独的 .html 文件中，然后在我的 index.html 中引用它们吗？
index.html :
索引.html：
<script type="text/template" id="item-list" src="item-list-tmpl.html"></script>
item-list-tmpl.html :
项目列表-tmpl.html ：
<div><%= ItemDescription %><%= ItemCode %></div>
I tried it but the problem is it doesn't show the template on index.html but it loads on the proper spot (viewed it using firebug)
我试过了，但问题是它没有在 index.html 上显示模板，但它在正确的位置加载（使用萤火虫查看）
UPDATE
更新
Found a possible solution but is not recommended for production environment.
找到了一个可能的解决方案，但不建议用于生产环境。
回答by jongbanaag
Got this from http://coenraets.org/blog/2012/01/backbone-js-lessons-learned-and-improved-sample-app/#comment-35324
从http://coenraets.org/blog/2012/01/backbone-js-lessons-learned-and-improved-sample-app/#comment-35324得到这个
Create a separate js file for this and call it before your js files for model,collection and views.
为此创建一个单独的 js 文件，并在模型、集合和视图的 js 文件之前调用它。
tpl = {
// Hash of preloaded templates for the app
templates:{},
// Recursively pre-load all the templates for the app.
// This implementation should be changed in a production environment. All the template files should be
// concatenated in a single file.
loadTemplates:function (names, callback) {
var that = this;
var loadTemplate = function (index) {
var name = names[index];
//console.log('Loading template: ' + name);
$.get('templates/' + name + '.html', function (data) {
that.templates[name] = data;
index++;
if (index < names.length) {
loadTemplate(index);
} else {
callback();
}
});
}
loadTemplate(0);
},
// Get template by name from hash of preloaded templates
get:function (name) {
return this.templates[name];
}
};
After that add this to your router
之后，将此添加到您的路由器
tpl.loadTemplates(['filename-of-your-external-html-file'], function () {
app = new AppRouter();
Backbone.history.start();
});
That should do it. But again not recommended for production environment as there will be hundreds to get request and may cripple your application.
那应该这样做。但同样不推荐用于生产环境，因为会有数百个请求并可能削弱您的应用程序。
回答by Derick Bailey
I wrote a solution for this, using jQuery and a simple TemplateCache object:
我为此编写了一个解决方案，使用 jQuery 和一个简单的 TemplateCache 对象：
http://lostechies.com/derickbailey/2012/02/09/asynchronously-load-html-templates-for-backbone-views/
http://lostechies.com/derickbailey/2012/02/09/asynchronously-load-html-templates-for-backbone-views/
And I recently updated the template loading to use a jQuery plugin called TrafficCop: http://lostechies.com/derickbailey/2012/03/20/trafficcop-a-jquery-plugin-to-limit-ajax-requests-for-a-resource/
我最近更新了模板加载以使用名为 TrafficCop 的 jQuery 插件：http: //lostechies.com/derickbailey/2012/03/20/trafficcop-a-jquery-plugin-to-limit-ajax-requests-for-a -资源/
Hope that helps.
希望有帮助。
