<rmcreative>

RSS

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

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

  1. №10744
    Nepster
    Nepster 10 нояб. 2016 г., 16:28:40

    Что-то я сомнительно отношусь к шаблонизаторам на клиенте. Блики бывают, это достаточно сильно раздражает в некоторых случаях.

  2. №10753
    Evgeniy
    Evgeniy 13 нояб. 2016 г., 17:00:44

    Так ведь уже много лет как имеется JS Nano-template github.com/trix/nano Взгляните на его исходник)

  3. №10911
    Евгений
    Евгений 01 апр. 2017 г., 14:34:07

    А для чего это может пригодится? Не проще ли на сервере сразу подставить данные? В чем плюс?

  4. №10912
    Sam
    Sam 01 апр. 2017 г., 20:24:34

    Например, чтобы работать напрямую с REST API без прослойки в виде PHP.

  5. №12068
    Сергей
    Сергей 17 дек. 2020 г., 23:05:37

    Ну не знаю ребята, я сразу подставляю данные и всё. Зачем усложнять?

  1. Почта опубликована не будет.

  2. Можно использовать синтаксис Markdown или HTML.

  3. Введите ответ в поле. Щёлкните, чтобы получить другую задачу.