Для получения полного доступа
зарегистрируйтесь

Суперпростые шаблоны без дополнительных библиотек


Для начала задаём сам шаблон прямо в HTML страницы:

<script type="html/tpl" id="my-template">
<div class="item">
    <h1>{title}</h1>
    <p class="description">{description}</p>
</div>
</script>

Далее реализовываем сам метод получения строки с заменёнными плейсхолдерами:

function renderTemplate(name, data) {
    var template = document.getElementById(name).innerHTML;

    for (var property in data) {
        if (data.hasOwnProperty(property)) {
            var search = new RegExp('{' + property + '}', 'g');
            template = template.replace(search, data[property]);
        }
    }
    return template;
}

Использовать можно так:

var html = renderTemplate('my-template', {
    title: "My cool thing",
    description: "It is really cool, isn't it?"
});

Стоит отметить, что экранирование спецсимволов не делается, так что будьте осторожны.

  Шаблонизаторы

Автор


samdark
  • Репутация: 334
  • Сниппеты : 55
  • Ревизии : 5
Подписаться

Чтобы увидеть комментарии, нужно быть участником сообщества

Регистрация