我在一个项目中使用handlebars.js，并且我开始拥有大量模板。 现在它们存储在我的主模板应用程序文件中，如下所示：
<script id="avatar_tpl" type="text/html">
bla bla bla {{var}} bla bla bla
</script>
我想知道是否有办法将它们放在单独的文件中，例如 .js 文件或其他文件，以避免在我的源代码页面中堆叠它们。
我知道有几种解决方案可以通过 Ajax 调用这些模板，但这似乎会导致对我来说太多不必要的请求。
谢谢
【问题讨论】：
标签： javascript backbone.js mustache handlebars.js
我创建并开源了NodeInterval，以解决我的 HTML 页面中太多 js 模板的完全相同的问题。
它允许您将所有模板放入以您喜欢的任何层次结构组织的模板文件夹中。它具有内置的watch 功能，因此当您修改任何这些模板时，它会自动更新您的 HTML 页面。我将它与 SASS 一起用于我的 CSS。
我每天都将它与下划线模板一起使用，但它也可以与 mustache 模板一起使用：
【讨论】：
您不能只在模板中包含一个 js 文件作为 js 变量吗？未测试，只是在这里思考：
//in your html page
<script id="avatar_tpl" type="text/html" src="mytemplates.js"></script>
// then in your mytemplates.js file
var template_1 = "{{ content }}";
var template_2 = "{{ content }}";
// and you could use it like this back in html page
var template1 = Handlebars.compile(template_1);
var template2 = Handlebars.compile(template_2);
【讨论】：
如果您使用的是 jquery，您可以创建一个 id 为“template-holder”的不可见 div
然后使用：
$("#template-holder").load([url here])
将html加载到div中 然后使用：
var templatestr = $("#template-holder").find("#avatar_tpl").html()
获取模板
:)
【讨论】：
我不熟悉handlebars.js，但是你试过吗？：
<script id="avatar_tpl" type="text/html" src="myscript.html"></script>
【讨论】：
Resource interpreted as Script but transferred with MIME type text/html
我现在已经为几个项目将我的所有脚本和模板滚动到一个大的 .js 文件中。我使用基于 java 的构建工具 ant 来连接和管理我的 js 的各种处理脚本。
在 javascript 变量中存储大型模板的最大问题是 javascript 缺少多行字符串。我通过使用类似 python 的三引号语法编写文件来处理这个问题：
var templateVariable = '''
<div>
<div></div>
</div>
'''
然后我通过下面包含的 python 脚本运行这个自定义语法的 javascript 文件，将其转换为合法的 javascript：
#!/usr/bin/env python
# encoding: utf-8
"""
untitled.py
Created by Morgan Packard on 2009-08-24.
Copyright (c) 2009 __MyCompanyName__. All rights reserved.
"""
import sys
import os
def main():
f = open(sys.argv[1], 'r')
contents = f.read()
f.close
split = contents.split("'''")
print "split length: " + str(len(split))
processed = ""
for i in range(0, len(split)):
chunk = split[i]
if i % 2 == 1:
processedChunk = ""
for i,line in enumerate(chunk.split("\n")):
if i != 0:
processedChunk = processedChunk + "+ "
processedChunk = processedChunk + "\"" + line.strip().replace("\"", "\\\"").replace('\'', '\\\'') + "\"" + "\n"
chunk = processedChunk
processed = processed + chunk
f = open(sys.argv[1], 'w')
f.write(processed)
f.close()
if __name__ == '__main__':
main()
通过这种方式，我可以用或多或少的纯 html 编写模板，并将它们与应用程序代码一起部署在单个 .js 文件中。
【讨论】：
我创建了一个延迟加载 javascript 文件，该文件仅在需要时加载模板。它正在执行 AJAX 调用，但似乎运行良好。
var Leuly = Leuly || {};
Leuly.TemplateManager = (function ($) {
var my = {};
my.Templates = {};
my.BaseUrl = "/Templates/";
my.Initialize = function (options) {
/// <summary>
/// Initializes any settings needed for the template manager to start.
/// </summary>
/// <param name="options">sets any optional parameters needed</param>
if (options && options.BaseUrl) {
my.BaseUrl = options.BaseUrl;
}
};
my.GetTemplate = function (templateName, success, baseUrl) {
/// <summary>
/// makes a request to retrieve a particular template
/// </summary>
/// <param name="templateName">name of the template to retrieve</param>
/// <param name="success">event returning the success</param>
var template = my.Templates[templateName];
if (template == null) {
template = my.LoadTemplate(templateName, success, baseUrl);
}
else {
success(template, true);
}
};
my.LoadTemplate = function (templateName, success, baseUrl) {
/// <summary>
/// makes a request to load the template from the template source
/// </summary>
/// <param name="templateName">name of the template to retrieve</param>
/// <param name="success">event returning the success</param>
var root = baseUrl == null ? my.BaseUrl : baseUrl;
$.get(root + templateName, function (result) {
my.Templates[templateName] = result;
if (result != null && success != null) {
success(result, true);
}
});
};
return my;
} (jQuery));
$(function () {
Leuly.TemplateManager.Initialize();
});
【讨论】：