<rmcreative>

RSS

Супрепростые шаблоны на 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?"
});

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

Комментарии RSS

  1. №10733
    JiLiZART
    JiLiZART 02.11.2016, 15:11:28

    На самом деле, jquery здесь не нужен, ибо найти элемент по id и на обычно vanilla.js можно.

  2. №10734
    Евгений
    Евгений 02.11.2016, 16:32:46

    JiLiZART: выросло поколение, без фреймворков уже и элемент по id взять не могут.

  3. №10735
    Владислав
    Владислав 02.11.2016, 21:03:38

    элемент по id взять

    Добрый день, уважаемый {userName}, как вы обратили внимание, на странице {pageTitle} нами был применен {secretWay} для шаблонов.

    Дело в том, что {secretWay} бывает очень полезен в простых приложениях, и в то же время очень {simple}.

    Спасибо за ваше обращение, {userName}, оно очень {importanceDegree} для нас.

  4. №10736
    Sam
    Sam 03.11.2016, 0:37:40

    Действительно :) Вот вариант без библиотек: rmcreative.ru/blog/post/supreprostye-shchablony-bez-dopolnitelnykh-bibliotek

  5. №10737
    Артём
    Артём 03.11.2016, 2:10:48

    Очень похоже на то, что опубликовал John Resig в 2008 — ejohn.org/blog/javascript-micro-templating/ :)

    Но штука полезная, сам периодически пользуюсь

  6. №10738
    TrejGun
    TrejGun 03.11.2016, 10:00:29
    function getProp(path, data) {
      var paths = path.split('.');
      var current = data;
     
      for (var i = 0; i < paths.length; ++i) {
        if (!current.hasOwnProperty(paths[i])) {
          return void 0; // or some default value
        } else {
          current = current[paths[i]];
        }
      }
      return current;
    }
     
    function tpl(template, data) {
      return template.replace(/(\{([^\{\}]+)\})/g, function($0, $1, $2){
        return getProp($2, data);
      });
    }
     
    tpl(document.getElementById('my-template').innerHTML, {
        title: "My cool thing",
        description: "It is really cool, isn't it?"
    });
  7. №10748
    Василий
    Василий 12.11.2016, 9:11:52

    Есть очень и очень простые, до безобразия, шаблонизаторы, например, mustache.js (без ГМО). Рано или поздно эти пару строк перерастут в нечто большое, что уже давно реализовано и отлажено вдоль и поперек.

  8. №10749
    Sam
    Sam 12.11.2016, 14:01:11

    Василий, конечно. Задача этого поста больше показать, что шаблонизатор — это просто.

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

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

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