Супрепростые шаблоны без дополнительных библиотек
3 ноября 2016
Вдогонку к варианту с jQuery тот же простой шаблонизатор, но без библиотек.
Для начала задаём сам шаблон прямо в 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?" });
Стоит отметить, что экранирование спецсимволов не делается, так что будьте осторожны.
Комментарии RSS по email OK
Что-то я сомнительно отношусь к шаблонизаторам на клиенте. Блики бывают, это достаточно сильно раздражает в некоторых случаях.
Так ведь уже много лет как имеется JS Nano-template github.com/trix/nano Взгляните на его исходник)
А для чего это может пригодится? Не проще ли на сервере сразу подставить данные? В чем плюс?
Например, чтобы работать напрямую с REST API без прослойки в виде PHP.
Ну не знаю ребята, я сразу подставляю данные и всё. Зачем усложнять?