Шаблонизатор Handlebars для JS

Цель использования шаблонизатора – хранить куски html в файлах для использования их в файлах javascript.

Для использования шаблонизатора, подключите файл handlebars-v4.0.5.js скачать

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

//Загрузить шаблон в элемент, для дальнейшего использования
function loadTemplate(path, elementId) {
    $.ajax({
        url: path,
        success: function (data) {
            var element = $('<div id = "' + elementId + '"></div>');
            element.hide();
            element.html(data);
            $("body").append(element);
        }
    });
};

//Загрузить шаблон в элемент, для дальнейшего использования

function loadTemplate(path, elementId) {

$.ajax({

url: path,

success: function (data) {

var element = $('<div id = "' + elementId + '"></div>');

element.hide();

element.html(data);

$("body").append(element);

}

});

};

Эта функция добавит элемент в конец body и запишет в него шаблон.

Шаблон popup.html:

<div class="white-popup">
   <div class="popup-title">{{{title}}}</div>
   <div class="popup-actions">
      {{{body}}}
    </div>
</div>

<div class="popup-title">{{{title}}}</div>

{{{body}}}

</div>

Использование шаблона:

var elementId = "popuptemplate"; // ID элемента для загрузки шаблона.
var template = "/Content/js/templates/popup.html"; // Путь к шаблону
loadTemplate(template, elementId); // Загружаем шаблон

var template = Handlebars.compile($("#" + elementId).html());
var context = { title: "title", body: "<p>Body</p>" };
var html = template(context );

var elementId = "popuptemplate"; // ID элемента для загрузки шаблона.

var template = "/Content/js/templates/popup.html"; // Путь к шаблону

loadTemplate(template, elementId); // Загружаем шаблон

var template = Handlebars.compile($("#" + elementId).html());

var context = { title: "title", body: "<p>Body</p>" };

var html = template(context );

В итоге в переменной html у нас окажется шаблон с подставленными в него значениями переменных title и body.

Используйте двойные скобки {{ вместо тройных {{{ и шаблонизатор будет отображать html в переменных как текст.

GigaUp

блог веб-программиста

Шаблонизатор Handlebars для JS