Хранение шаблонов Handlebars в отдельных файлах
Инструменты

Хранение шаблонов Handlebars в отдельных файлах

Handlebars.js — это отличный инструмент для шаблонизации на клиенте. Согласно официальной документации, шаблоны можно хранить непосредственно в html-файле:


<script id="entry-template" type="text/x-handlebars-template">
    <div class="entry">
        <h1>{{title}}</h1>
        <div class="body">{{body}}</div>
    </div>
</script>

Компилируется шаблон следующим образом:


var source   = $("#entry-template").html();
var template = Handlebars.compile(source);

Это удобно, когда на странице четыре-пять шаблонов и поддерживать их не сложно. Но с ростом приложения увеличивается и количество шаблонов. В таком случае удобно хранить шаблоны в отдельных файлах. Загружать шаблон можно асинхронно по мере необходимости. Рассмотрим один из вариантов такого хранения шаблонов.

Выделим каждый шаблон в отдельный файл и положим в директорию js/templates:

  • js/templates/clothes.html
  • js/templates/shoes.html
  • js/templates/accessories.html

Далее создадим функцию loadTemplate, которая будет загружать шаблон из внешнего файла:


<script>
(function loadTemplate(path) {
    var source, template;
    $.ajax({
        url: path,
        cache: true,
        success: function(data) {
            source    = data;
            template  = Handlebars.compile(source);
            $('#goods_list).html(template);
        }
    });
})();
</script>

Эта функция принимает один параметр — путь в шаблону и отправляет AJAX-запрос по этому пути. Далее результат запроса компилируется с помощью Handlebars.compile и вставляется в этлемент $(’#goods_list).

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


<script>
(
    function loadTemplate(path, callback) {
        var source, template;

        $.ajax({
            url: path,
            success: function(data) {
                source    = data;
                template  = Handlebars.compile(source);

                if (callback && typeof callback === 'function') {
                    callback(template);
                }
            }
        });
    }

    (loadTemplate('js/templates/shoes.html', function(template) {
        $('#goods').html(template);
    })();
)();
</script>

Мы добавили второй параметр callback — функцию обратного вызова, которая будет выполняться, когда шаблон загружен.

Есть еще один способ модификации этой функции с помощью jQuery.Deferred для более универсального использования:


<script>
(
    function loadTemplate(path, callback) {
        var deferred = new $.Deferred(),
            source, template;

        $.ajax({
            url: path,
            success: function(data) {
                source    = data;
                template  = Handlebars.compile(source);
                deferred.resolve(template);
            }
        });

        return deferred.promise();
    }

    $.when(loadTemplate('js/templates/shoes.html'))
    .then(function(template) {
        $('#goods').html(template);
    })();
)();
</script>

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

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться