Эй, я знаю, что существует множество фреймворков, которые будут обрабатывать двустороннюю привязку данных за вас. Но будучи разработчиком javascript, вы должны знать, как это работает. Начнем шаг за шагом.
Для достижения двусторонней привязки данных воспользуемся методом получения и установки.
Вы можете проверить полный код здесь
Шаг 1: HTML-код
Добавьте атрибут data-bind (вы можете использовать выбранное имя) ко всем входам, к которым вы хотите обрабатывать двустороннюю привязку данных.
В этом примере я обработал двустороннюю привязку данных для входного элемента firstName и lastName, поэтому я добавил атрибут data-bind к этим двум входным элементам. Вот и все, теперь мы хорошо разбираемся в HTML.
Шаг 2: код Javascript
Теперь самое интересное. Нам нужно сначала получить все элементы, у которых есть атрибут data-bind. Затем привяжет нашу опору (значение привязки данных) к объекту области видимости. Объект Scope - это обычный объект javascript, к которому будет добавлен метод установки, всякий раз, когда пользователь начинает вводить текст, этот метод установки, связанный с опорой, будет вызываться и связывать введенное пользователем значение с элементом DOM. В нашем случае значение будет привязано к элементу input и span.
Здесь я прикрепляю прослушиватель событий onKeyup ко всему вводу типа text (вы можете проверить другие типы ввода, такие как textarea). Перед присоединением события я вызываю функцию «bindPropScope», которая привяжет опору к области видимости, это поможет запустить метод установки при нажатии клавиши.
В приведенном выше фрагменте кода я добавляю метод установки к объекту области со значением атрибута привязки данных в качестве имени метода установки. Поэтому всякий раз, когда изменяется значение входного элемента, этот метод установки вызывается и обновляет DOM.
Я надеюсь, что это даст вам представление о том, как двусторонняя привязка данных обрабатывается во фреймворках.
