Знаете ли вы js библиотеку с two way binding, хранящую все данные в html?

Question

[Imbolc]

Хотелось бы как-то декларативно описать модель, с указанием типов и получить объект с геттерами / сеттерами, фильтрами и т.п. Примерно то, что делают angular или knockout. Только чтобы все данные либа хранила прямо в html. Таким образом ей можно было бы подсунуть, допустим хтмл сгенерённый на сервере. Или другие библиотеки могли бы менять html, а эта библиотека работала бы с ним так же как если бы изменения сделаны были через неё.

Comments

[Виталий Желтяков]

Что мешает написать свой механизм?

[Imbolc]

Возможная избыточность этой писанины :)

Answer 1

[Сергей Протько]

1) это будет работать крайне медленно
2) проще и лучше при иницаилизации делать запрос на сервер что бы забрать данные в JSON-формате.
3) это можно сделать с тем же angular.js через директивы типа ng-init, но смотри пункт 1

Comments

[Imbolc]

1) На некоторых задачах, даже быстрее будет. Вот сравните заполнение списка на jquery, ko & ng: plnkr.co/edit/cTWetiNBorS8P2xcHhgm?p=preview

2) Во первых ещё один запрос. Во вторых повторная передача данных. В третьих дополнительный код на сервере.

3) Насколько я понимаю, вопрос изменения html внешними плагинами это не решает, только через ангуляр потом взаимодействовать.

[Сергей Протько]

1) я так и не понял как этот бенчмарк относится к задаче.
2) зато позволяет более гибко подойти к разработке. А код на сервере будет в любом случае, и дублирования я не вижу. Только "лишний" запрос на сервер. Возможно я просто не знаю деталей вашей задачи.
3) раскройте пожалуйста мысль, как вы себе это представляете?

Вообще у меня сложилось впечатление что я вас вообще не так понял. Пример "желаемого" инструмента был бы уместен.

[Imbolc]

Примера не знаю. Опишу задачу, в которой вижу этот инструмент уместным. Есть крупный сайт с серверным рендеренгом шаблонов. И кучей не звязанных jquery-плагинов. Исторически сложившийся говнокод. Они как-то там взаимодействуют на уровне html. Мне нужно несколько "оживить" существующие данные.

Эти данные уже есть на странице в виде html. Если добавить их на страницу ещё раз в виде json, размер страницы возрастёт в 2 раза, а она не маленькая и так. К тому же это требует изменений на сервере. И сами по себе данные не простые, с кучей фильтров, какстомных тегов в серверных шаблонах. Их даже в json сдампить не так просто.

В идеале мне хотелось бы с минимальными усилиями, не вникая во всё происходящее оживить часть html. То есть two way binding был бы очень кстати. Большой скорости мне не нужно, обновления будут не частые (типа увеличения числа лайков).

Answer 2

[lega]

Таким образом ей можно было бы подсунуть, допустим хтмл сгенерённый на сервере.

Идея интересная, можно использовать ng-init или сделать аналог, сделал пример на angular light

Likes: <span al-take-value="likeCount" al-text="likeCount">15</span>

До загрузки приложения отображает "Likes: 15", когда приложение загрузится, директива al-take-value возьмет значение элемента, когда с сервера будет прилетать информация, то текст будет обновляться с пом. директивы al-text, хотя для более сложных данных вариант с json + ng-init может быть удобнее.

Или другие библиотеки могли бы менять html, а эта библиотека работала бы с ним так же как если бы изменения сделаны были через неё.

Можно сделать спец. директивы для этого, но я думаю что это плохое решение, тем более оно не будет работать например с jquery компонентами такими как select2, там идет подмена элементов, есть реализации datepicker где нужно работать через js, и т.д.