如何將我的鬍鬚/把手模板儲存在單獨的文件中？

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