Шаблонизатор библиотеки LoDash

• Создание рендер функции и передача данных
• Примеры использования javascript кода внутри шаблона
• Вывод массива товаров

---

Шаблоны имеют простой синтаксис:

<% javascript code; %> – javascript код

Между разделителями <% ... %> записывается и выполняется javascript код.

---

<%= HTMLString %> – вывод строки как HTML

Содержимое переменной будет выводиться как HTML.

---

<%- text %> – вывод строки в виде текста.

Теги будут будут преобразованы в текст. Например <hr> -> <hr>

---

script type="text/template"

Теги script с типом type="text/template" служат контейнерами для шаблонов.

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

Пример

<script type="text/template" id="items-template">
<div class="items">
  <% _.forEach(items, function(item) { %>
  <div class="item-title">
    <%- item.title %>
  </div>
  <div class="item-description">
    <%= item.description %>
  </div>
  <% }); %>
</div>
</script>

Создание рендер функции и передача данных

Чтобы отрисовать шаблон на основе данных, нам нужно создать рендер функцию.

Рендер функция создается из написанного нами шаблона.

Это нужно для того чтобы заменить <%- title %> на данные из javascript объектов.

Пример:

var compiled = _.template('hello <%= user %>!');
compiled({ 'user': 'fred' });
// => 'hello fred!'

Чтобы создать рендер функцию нужно передать в метод _.template содержимое нашего шаблона.

Для удобства мы записываем шаблоны в тег script type="text/template".

Получившийся результат можем вывести на страницу в виде html кода.

Пример:

<div class="js-dinamic"></div>

<script type="text/template" id="hello">
hello <%= user %>!
</script>

<script type="text/javascript">
var compiled = _.template($('#hello').html());
$('.js-dinamic').html(compiled({ 'user': 'fred' }));
</script>

🖥️ Пример на codepen.io

🖥️ Пример с динамическими данными на codepen.io

Примеры использования javascript кода внутри шаблона

<script type="text/template" id="main-template">
  Цикл из массива items.
  <% _.forEach(items, function(item, index) { %>
  <div class="item">
    (<%- index %>) <%- item %>
  </div>
  <% }); %>

  <div>
    Используя внутри шаблона javascript методы, обязательно ставьте точку с запятой (;).
    <% console.log(items); %>
    <br>
    Но если вызываем функцию которая возвращает значение то точка с запятой не ставится и в разделитель добавляется знак равно (=).
    <%= textUpperCase('text') %>
    => TEXT
  </div>

  <div>
    Операторы сравнения.
    <% if (true) { %>
      Истина
    <% }else{ %>
      Ложь
    <% } %>
    <% if (true) { %>
      Только истина
    <% } %>
  </div>

  Использование кода в атрибутах.
  <% _.forEach(items, function(item, index) { %>
  <div class="item" data-inex="<%- index %>">
    <%- item %>
  </div>
  <% }); %>
</script>

<script type="text/javascript">
  // Функция делает все буквы заглавными
  function textUpperCase(text) {
    return text.toUpperCase();
  }
</script>

🖥️ Пример на codepen.io

Вывод массива товаров (Common.V2)

<script type="text/template" id="products-template">
<% _.forEach(items, function(item, product) { %>
  <form class="card" data-product-id="<%= product.id %>">
    <a href="<%= product.url %>" class="card-image">
      <img src="<%= product.first_image.large_url %>">
    </a>

    <div class="card-title">
      <a href="<%= product.url %>">
        <%= product.title %>
      </a>
    </div>

    <div class="card-prices">
      <div class="card-price">
        <%= Shop.money.format(product.variants[0].price) %>
      </div>
      <% if (product.variants[0].old_price){ %>
        <div class="card-old_price">
          <%= Shop.money.format(product.variants[0].old_price) %>
        </div>
        <% } %>
      </div>

      <div class="card-action">
        <input type="hidden" name="variant_id" value="<%= product.variants[0].id %>" >

        <div data-quantity>
          <input type="text" name="quantity" value="1" />
          <span data-quantity-change="-1">-</span>
          <span data-quantity-change="1">+</span>
        </div>
      </div>

      <div class="card-buy">
        <% if (product.variants.size > 1){ %>
          <a href="<%= product.url %>" class="btn">Подробнее</a>
        <% }else{ %>
          <button data-item-add class="btn" type="submit">В корзину</button>
        <% } %>
      </div>
  </form>
<% }); %>

<!-- Если нужно узнать какие переменные переданы в рендер функцию, нужно вывести переменную obj.
<% console.log(obj); %> -->
</script>