Todolist item을 수정하기
사용자는 리스트를 더블클릭해서 내용 수정하고 싶음!
아래의 과정은 더블클릭해서 해당 리스트가 input 태그로 바뀌고 input 값에 리스트의 내용이 value로 나타나기까지의 과정이다.
MVC 패턴에서 Controller는 Model과 View를 조작하는 역할을 한다.
1) Controller.js | this.view.bind
이벤트 핸들러를 붙이는 건 View의 영역이므로 Controller의 메소드로 view.bind를 지정해줌
2) View.js | View.prototype.bind
- 1) todolist에 dblclick 리스너 붙임
- 2) View.prototype._getItemId를 이용해서 클릭된 리스트의 id 값 찾아냄
찾은 id 값 handler 함수로 전달
3) Controller.js | this.view.bind
function의 item 인자는 클릭된 리스트의 id 값이다. 예) item = { id : 1234 }
어떤 item을 수정할지 view에서 알아냈으니 이제 editItem으로 조작할 차례, Controller의 editItem에게 id 값 전달
4) Controller.js | Controller.prototype.editItem
editItem의 주된 역할은 모델에서 id로 리스트를 찾아서 텍스트를 가져와서 input value에 넣는 것이다.
model에서 해당 id의 리스트 텍스트 값을 먼저 읽어오려고 함
5) Model.js | Model.prototype.read
Model.prototype.read는 storage에게 {id:1234}인애를 찾아오라고 지시
6) Store.js | Store.prototype.find
브라우저의 localStorage에 리스트들이 저장되어있음 , filter 함수를 이용해서 todos 중 id: 1234인애를 찾아서 보냄
7) Controller.js | Controller.prototype.editItem
이제 모델에서 id로 리스트를 찾고 리스트 내용을 알아왔으니까 View에서는 수정할 수 있는 input 태그로 화면을 렌더링 해야함
알아온 list의 id와 title을 View에게 전달
8) View.js | View.prototype.render
수정을 위한 화면을 렌더링 할 때는 _editItem 사용, id와 title 전달
8) View.js | View.prototype._editItem
listItem class 변경, input 엘리먼트 생성하여 해당 value 값을 모델에서 받은 title로 채워넣음
여기까지가 더블 클릭해서 수정할 수 있게 만들기까지의 과정 😅
