如何在单独的文件中存储我的八字胡/把手模板

<script id="avatar_tpl" type="text/html">
bla bla bla {{var}} bla bla bla
</script>

我创建和开源NodeInterval的这个完全相同的问题，太多的js模板在我的HTML页面。

它允许你把你所有的模板到一个模板文件夹组织在任何层次你喜欢。它具有内置的watch功能，因此当您修改任何这些模板时，它会自动更新您的HTML页面。我将它与SASS一起用于我的CSS。

我每天都用它来处理下划线模板，但它也应该可以很好地处理小胡子模板:

https://github.com/krunkosaurus/NodeInterval

你不能只是包含一个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>

我现在已经把我所有的脚本和模板集中到一个大的.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文件中。

我创建了一个Lazy Load 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();
});