[Day 18] 웹 페이지에서 댓글 수정하기

1. 댓글 수정의 개요

댓글 수정 페이지는 모달 기능을 이용해 만든다.

모달(modal)이란?

웹 페이지에서 새 창을 띄우는 팝업 창과 달리 같은 웹 페이지 내부에서 상위 레이어를 띄우는 방식으로 사용하는 창이다. 모달 창이 뜨면 기존 창은 비활성 상태가 되고, 모달 창을 종료해야만 원래 화면으로 돌아갈 수 있다.

---

2. 댓글 수정 뷰 페이지 만들기

resources > articles > Comments > _list.mustache 코드 추가

 

실행 결과

---

3. 자바스크립트로 댓글 수정하기

트리거 데이터 전달

모달 트리거 버튼에 data-*속성을 이용하면 데이터를 모달로 전달할 수 있다.

1. 모달 트리거 버튼에 수정할 댓글 정보를 data-* 속성 값으로 저장한다.
2. show.bs.modal 이벤트를 감지해 핸들러에서 모달 트리거 버튼을 변수(trriggerBtn)화한다.
3. 버튼 변수(trrigerBtn)를 이용해 data-* 속성에 담긴 댓글 정보 가져온다.
4. 수정 폼에 데이터를 반영한다.

 

resources > articles > Comments > _list.mustache 코드 추가

 

실행결과