Страницы

Поиск по вопросам

вторник, 9 октября 2018 г.

Шаблонизатор, не перестраивающий DOM при обновлении

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

{{ /foreach }} {{ if notice }}

{{ notice.message }}

{{ /if }} шаблонизатор должен «осознавать» что будет брать данные из объекта data.fields.foo и понимать, что атрибут name строился как "input_" + data.fields["foo"].name, а содержимое — это data.fields["foo"].value. Причем — повторюсь — с учетом семантики — раз это