PDA

Просмотр полной версии : Java Script Простейший шаблонизатор


Mendel
09.03.2017, 15:59
На самом деле эта "статья" состоит из одного тега. Тег template.
Поддерживается большинством современных браузеров. Так что в админках уже можно юзать.
Описание. (https://html.spec.whatwg.org/multipage/scripting.html#the-template-element)
Фидл с примером (https://jsfiddle.net/0dovdfd5/).
Пример:

<table id="table">
<tbody>
<template class="row">
<tr>
<td class="name"></td>
<td class="color"></td>
<td class="sex"></td>
<td class="legs"></td>
</tr>
</template>
</tbody>
</table>

Ну и простейший ЖС.

function renderTable(tableSelector,rowSelector,data) {
var table = document.querySelector(tableSelector);
var template = table.querySelector(rowSelector);
for (var i = 0; i < data.length; i += 1) {
var line = data[i];
var clone = template.content.cloneNode(true);
for(var key in line) {
var selector = '.' + key;
clone.querySelector(selector).textContent = line[key];
}
template.parentNode.appendChild(clone);
}
}
// вызовем функцию
var data = [
{ name: 'Pillar', color: 'Ticked', sex: 'Female', legs: 3 },
{ name: 'Hedral', color: 'Tuxedo', sex: 'Male', legs: 4 },
{ name: 'Hedral', color: 'Tuxedo', sex: 'Male', legs: 4 },
];
renderTable('#table','.row',data);

По хорошему надо бы немного универсальнее и чище, но за пример сойдет.

Александр
15.03.2017, 18:07
Спецификация активно юзается в современных js-тулзах, типа polymer, vue.js, react итп.

ps также советую посмотреть на спеку Shadow DOM :)

Mendel
17.03.2017, 17:29
Shadow DOM
Насколько я помню там тяжело с поддержкой.
Но я даже не о том.
Хочу очень простой шаблонизатор.
Изредка бывает надо сделать что-то динамически, и не хочется тащить за собой тяжелые библиотеки.
А тут всё достаточно просто.
Написать такой вот скрипт на экран кода, прописать основные фичи шаблонизатора (а их всего три - вывести переменную, цикл и условие) - в виде атрибутов data-foreach="переменная", да и скармливать вот это вот одной строчкой даже без жгвери.
Звучит прикольно, но мне конечно же лень. Везде где оно было бы уместно у меня уже всё написано, и переписывать я поленюсь)))