Как разместить мои шаблоны Mustache/Handlebars в отдельных файлах?
Я использую handlebars.js в проекте, и у меня начинает иметься множество шаблонов.
Пока они хранятся в моем основном файле приложения шаблона, например:
<script id="avatar_tpl" type="text/html">
bla bla bla {{var}} bla bla bla
</script>
Мне интересно, есть ли способ разместить их в отдельном файле, таком как .js файл, или что-то в этом роде, чтобы избежать их компоновки на моей исходной кодовой странице.
Я знаю, что есть несколько решений для вызова тезисов с помощью Ajax, но, похоже, для меня слишком много ненужных запросов.
Спасибо
Ответы
Ответ 1
Я создал и open-sourced NodeInterval для этой же проблемы слишком много js-шаблонов на моей HTML-странице.
Он позволяет помещать все ваши шаблоны в папку шаблонов, организованную в любой иерархии, которая вам нравится. Он имеет встроенную возможность watch
, поэтому при изменении любого из этих шаблонов он автоматически обновляет вашу HTML-страницу. Я использую его вместе с SASS для моего CSS.
Я использую его ежедневно с шаблонами подчеркивания, но он также должен хорошо работать с шаблонами усов:
https://github.com/krunkosaurus/NodeInterval
Ответ 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);
Ответ 3
Если вы используете jquery, вы можете создать невидимый div с идентификатором "держатель шаблона"
затем используйте:
$("#template-holder").load([url here])
загрузить html в div
затем используйте:
var templatestr = $("#template-holder").find("#avatar_tpl").html()
чтобы получить шаблон
:)
Ответ 4
Я не знаком с handlebars.js, но вы пробовали это?:
<script id="avatar_tpl" type="text/html" src="myscript.html"></script>
Ответ 5
Я собирал все мои скрипты и шаблоны в один большой .js файл для нескольких проектов. Я использую Java-инструмент построения, ant, чтобы объединить и управлять различными сценариями обработки для моих js.
Самая большая проблема с хранением больших шаблонов в переменных javascript - это отсутствие многострочных строк в javascript. Я имею дело с этим, написав мои файлы с синтаксисом тройной цитаты типа python:
var templateVariable = '''
<div>
<div></div>
</div>
'''
Затем я запускаю этот файл javascript с настраиваемым синтаксисом, хотя приведенный ниже python script, который превращает его в юридический 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.
Ответ 6
Я создал javascript файл Lazy Load, который загружает шаблоны только по мере необходимости. Он выполняет вызовы 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();
});