如何将我的胡子/车把模板存储在单独的文件中？

Question

我在一个项目中使用handlebars.js，并且开始拥有相当数量的模板。 目前它们存储在我的主模板应用程序文件中，如下所示：

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

我想知道是否有一种方法可以将它们放入单独的文件（例如 .js 文件或其他文件）中，以避免将它们堆叠在我的源代码页面中。

我知道有几种解决方案可以通过 Ajax 调用这些模板，但这似乎会给我带来太多不必要的请求。

谢谢

Answer 1

我创建并开源了 NodeInterval 来解决我的 HTML 页面中太多 js 模板的完全相同的问题。

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

我每天都将它与下划线模板一起使用，但它也应该与胡子模板一起正常工作：

https://github.com/krunkosaurus/NodeInterval

Answer 2

难道你不能只在模板中包含一个 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);

Answer 3

如果您使用jquery，您可以创建一个ID为“template-holder”的不可见div

，然后使用：

$("#template-holder").load([url here])

将html加载到div中
然后使用 :

var templatestr = $("#template-holder").find("#avatar_tpl").html()

获取模板

:)

Answer 4

我不熟悉handlebars.js，但是，你尝试过这个吗？：

<script id="avatar_tpl" type="text/html" src="myscript.html"></script>

Answer 5

我现在已经将多个项目的所有脚本和模板都汇总到一个大的 .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 文件中。

Answer 6

我创建了一个延迟加载 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();
});