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

Ответ 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();
});