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

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

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

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

Answer 3

你不能只包括与您的模板作为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 4

我一直在滚动我所有的脚本和模板在一个大的.js文件，现在几个项目。我使用基于java的构建工具ant来连接和管理我的js的各种处理脚本。

将大型模板存储在javascript变量中的最大问题是javascript缺少多行字符串。我处理这个写有蟒蛇般的三引号语法我的文件：

var templateVariable = ''' 
    <div> 
    <div></div> 
    </div> 
''' 

我然后运行这个自定义语法JavaScript文件虽然包含下面的python脚本，它把它在法律的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 5

如果你正在使用jQuery，您可以用ID“模板支架”创建一个不可见的div

然后使用：

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

到HTML加载到DIV 然后使用方法：

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

得到

:)

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(); 
});