Я пытаюсь создать свой собственный код привязки данных, в основном для обучения, и поэтому я точно знаю, что происходит. Где должны быть указаны соответствующие данные для привязки данных? Я видел два подхода.
A) Укажите пользовательские атрибуты данных в элементах HTML, чтобы указать цель привязки, атрибут, атрибут элемента, который привязывается, и т. Д. Примерно так:
<input type="text" data-model="myState" data-attr="value:title" data-events="keyup" />
data-model определяет объект JS, который должен быть связан, attr - это атрибут элемента и атрибута объекта, а события - это то, какое событие должно инициировать привязку. Затем код JS может автоматически идентифицировать и добавлять прослушиватели на основе этих атрибутов.
Это пример, на котором я изначально основывал свой код:
https://stackblitz.com/edit/two-way-data-binding-poc
B) Другой подход, который я видел, заключается в связывании данных со стороны JS, и с использованием идентификатора элемента слушатели и атрибуты указываются с помощью кода JS. Это означает, что для HTML потребуется только идентификатор, а все остальное указано в JS. Если я правильно понимаю код, я думаю, что этот SO QA имеет такой тип:
Как реализовать связывание данных DOM в JavaScript
Обе концепции (и я предполагаю привязку данных в целом) должны знать объект, элемент пользовательского интерфейса и атрибуты, которые должны быть связаны. Это лучше сделать в коде пользовательского интерфейса (A) или коде JS (B)?
Или же A и B одинаково действительны при разных обстоятельствах? Это для одностраничного приложения, и я намерен хранить как можно больше информации о состоянии непосредственно на сервере и использовать JS для обработки динамических взаимодействий.
После некоторых дополнительных размышлений преимущество A состоит в том, что вы можете изменить визуализацию связанного состояния, обновляя только код пользовательского интерфейса. Вариант B потребует изменения как кода UI, так и кода JS для добавления или изменения элемента.