양방향 바인딩
-
[Web] 순수 자바스크립트로 양방향 데이터 바인딩 구현(Pure Javascript Two-way Data binding) - 추가작업(이벤트 재할당)frontend/javascript&web 2023. 6. 13. 12:42
오늘은 지난번에 진행했던 양방향 데이터 바인딩 구현을 이어서 진행해보려고 합니다. 지난번의 작업중 이어서 할 작업은 DOM변경에 대한 이벤트 재할당 기능을 추가하려고 합니다. 이 작업은 아주 쉬운 방법으로 추가할 수 있습니다. 1. DOM 초기화 로직 세분화 아래는 기존의 initializeDOM 함수입니다. 해당 소스는 DOM을 최초로 초기화 하는 작업이 추가 되어 있습니다. 하지만 아래 작업의 내용을 DOM이 변경 된 이후 이벤트 재할당 과정이 필요하기 때문에 DOM초기화 로직을 분리 시켜야됩니다. initializeDOM() { const bindings = Array.from(this.$el.querySelectorAll("[b-model]")); bindings.forEach((element) ..