<rmcreative>

RSS

Все заметки с тегами «JavaScript, Шаблонизаторы»

Можно уточнить:

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

    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?"
    });

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

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

    2 ноября 2016

    Шаблоны — это удобно. Особенно когда альтернатива — формировать HTML конкатенацией. Если в проекте есть 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?"
    });

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

    8 комментариев
  3. Простое шаблонирование в JavaScript

    22 января 2010

    Замечательный способ несколько разгрузить JavaScript код, используя для этого всего одно небольшое дополнение к стандартному объекту String.

    Читаем

    Комментировать