Как хранить мои шаблоны усов/рулей в отдельных файлах?

Я создал и открыл исходный код 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, вы можете создать невидимый div с идентификатором «template-holder»

затем используйте:

$("#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>
'''

Затем я запускаю этот файл 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.

Я создал файл 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();
});