9

Шаблонизаторов сейчас ну очень много и я уже заблудился в 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 года и позднее, никакой некромантии).

4
  • >При этом (как еще одно отличие от того же Knockout) требуется отсутствие ошибок от того, что используется data.notice.message, которого изначально не существует. каких ошибок? по делу, вам нужно нечто вроди Ember.js
    – Spectre
    Commented 16 янв. 2013 в 8:06
  • А, ну значит я не осилил просто, я делал data-bind="text: notice.message", что приводило к характерному отказу работать. Ember — это вариант, но он живет на observables. А я, все же, пожалуй, хочу слабо связанные компоненты, чтобы те же модели в любой момент времени можно было начисто заменить.
    – drdaeman
    Commented 16 янв. 2013 в 11:44
  • ещё недавно прочитал про Dirty checking, который используется в AngularJS, но никогда с ним не работал.
    – Spectre
    Commented 16 янв. 2013 в 12:05
  • @drdaeman: верным помечен устаревший ответ, исправьте пожалуйста Commented 12 сент. 2015 в 19:52

2 ответа 2

2

Вы буквально описали поведение фронтенд-движков, основанных на концепции Virtual DOM.

К ним относятся, например: широко распиареный в настоящее время React, менее известный, не менее функциональный, зато более быстрый и лёгкий Mithril, а также концептуально выверенный и расширяемый virtual-dom.

Причиной появления таких движков является то, что все операции с реальным DOM происходят относительно медленно и в высокодинамичных приложениях являются самым узким местом.

Принцип действия этих библиотек основан на создании легковесной эмуляции DOM и diff-алгоритме, применяющем в реальный документ только изменённые части виртуального дерева.

Помимо бенефитов в плане производительности, такие движки могут улучшить качество вашего фронтенд-кода, т.к. позволяют реализовать полностью функциональный стиль манипуляций с элементами, используя при этом весь арсенал средств Javascript - нативные forEach, map, reduce и так далее.

Дополнительные материалы:

Статья о том, как организован Virtual DOM в React: http://calendar.perfplanet.com/2013/diff/

Простая и понятная имплементация diff-алгоритма: https://gist.github.com/Raynos/8414846

PS: также, вполне адекватным ответом на этот вопрос, несмотря на неприятие автором knockoutjs, является Angular и его аналоги - тот-же Knockout, Vue, Ractive, а особенно последний, ввиду его простоты и нетребовательности к уже используемой архитектуре.

0

Шаблонизатора такого не знаю, но связка из любого шаблонизатора + Metamorph.js может оказаться вполне годна для частичного изменения на странице.

А что до скрытия\показа - вручную по стилям, сомневаюсь что есть такие шаблонизаторы.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.