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

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

15 голосов
/ 17 октября 2011

Я использую handlebars.js в проекте, и у меня начинает появляться достаточное количество шаблонов.На данный момент они хранятся в моем главном файле шаблона приложения, например: 

<script id="avatar_tpl" type="text/html">
bla bla bla {{var}} bla bla bla
</script>

Мне интересно, есть ли способ поместить их в отдельный файл, например, в файл .js или что-то, чтобы избежатьскладывая их в моей исходной кодовой странице.

Я знаю, что есть несколько решений для вызова шаблонов тезисов через Ajax, но это, кажется, приводит к слишком большому количеству ненужных запросов для меня.

Спасибо

Ответы [ 6 ]

8 голосов
/ 21 октября 2011

Я создал и с открытым исходным кодом NodeInterval для этой точно такой же проблемы слишком много шаблонов js на моей странице HTML.

Позволяет поместить все ваши шаблоны в папку шаблонов, организованную в любой иерархии, которая вам нравится.Он имеет встроенную возможность watch, поэтому при изменении любого из этих шаблонов он автоматически обновляет вашу HTML-страницу.Я использую его вместе с SASS для моего CSS.

Я использую его ежедневно с шаблонами подчеркивания, но он должен хорошо работать и с шаблонами усов:

https://github.com/krunkosaurus/NodeInterval

4 голосов
/ 17 октября 2011

Не могли бы вы просто включить файл 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 голосов
/ 06 октября 2013

если вы используете jquery, вы можете создать невидимый div с идентификатором "template-holder"

, затем использовать: 

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

, чтобы загрузить html в div, а затем использовать:

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

для получения шаблона

:)

1 голос
/ 28 ноября 2013

Я создал файл 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();
});
1 голос
/ 18 октября 2011

Сейчас я свернул все свои скрипты и шаблоны в один большой файл .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.

1 голос
/ 17 октября 2011

Я не знаком с handlebars.js, но вы пробовали это?: 

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