Шаблонизаторов сейчас ну очень много и я уже заблудился в Google, перебирая тысячи их. Хочу найти такой, который будет уметь не только из строки делать строку, но который умеет находить и выполнять только изменения в DOM. Причем без использования observables, т.е. Knockout.js предлагать не нужно — я не хочу возиться с ko.utils.unwrapObservable
на каждый шаг, я просто скажу руками когда что-то надо обновить. Правда, в идеале, я не всегда знаю что (пришли новые данные, и вручную смотреть разницу со старой версией не очень-то и хочется).
Я хочу отрисовать начальное:
t = "( Строка с кодом шаблона )";
data = {
fields: {foo: "Foo", bar: "Bar"},
notice: null
};
$("#target").empty().render_template(t, data);
И потом мог обновлять данные, не перерисовывая весь DOM (т.е. сохраняя состояние элементов):
data.fields["foo"] = "Foo!";
data.notice = { message: "Here, I've added an exclamation mark for you." };
$("#target").render_template(null /* шаблон оставить старым */, data);
Тут от шаблонизатора требуется понимание что такое DOM, и умение запоминать какие переменные пошли в какие атрибуты и текстовые ноды, с учетом семантики элементов. Т.е., по некоему
{{ foreach fields as name: field }}
<p><textarea name="input_{{ name }}">{{ field.value }}</textarea></p>
{{ /foreach }}
{{ if notice }}<p class="notice">{{ notice.message }}</p>{{ /if }}
шаблонизатор должен «осознавать» что <textarea name="foo">Foo</textarea>
будет брать данные из объекта data.fields.foo
и понимать, что атрибут name
строился как "input_" + data.fields["foo"].name
, а содержимое — это data.fields["foo"].value
. Причем — повторюсь — с учетом семантики — раз это <textarea>
, то, семантически, текстовая нода имеет отношение к DOM-атрибуту value
.
Когда поменялся элемент, то обновления должны происходить только с одним <textarea>
(в нужных местах), а не приводить к перерисовке всего шаблона. Т.е. соседние <textarea>
«пострадать» никак не должны.
При этом (как еще одно отличие от того же Knockout) требуется отсутствие ошибок от того, что используется data.notice.message
, которого изначально не существует. Разумеется, при условии, что эта часть дерева заблокирована if'ом от существования.
От самих шаблонов нужно ровно две вещи:
- Простейшая логика условий существования (проверка на false, null, undefined и пустой список, опционально, но желательно — строгое сравнение с константой)
- Простейшая логика скрытия (аналогично условиям, но не создает/удаляет DOM-ноды, а скрывает или показывает их)
- Простейшая логика итерации (пробег по массиву или собственным ключам объекта)
Синтаксис никакого значения не имеет.
Работа нужна только в браузерах и только разумно современных (2009 года и позднее, никакой некромантии).
data-bind="text: notice.message"
, что приводило к характерному отказу работать. Ember — это вариант, но он живет на observables. А я, все же, пожалуй, хочу слабо связанные компоненты, чтобы те же модели в любой момент времени можно было начисто заменить.