이번 강의에서는 선택한 할 일을 완료하고 삭제할 수 있도록 기능을 구현합니다.
완료 기능의 의도하는 동작 시나리오는 다음과 같습니다.
- 완료할 할 일의 행에서 완료 버튼을 누릅니다.
- 선택한 할 일의 내용에 취소선이 생깁니다.
1번을 구현할 때에는 새 ToDo 추가하기 - todo.js에서 만들었던 click 함수를 그대로 이용하면 안 됩니다. 지난 강의에서 사용한 click 함수는 해당 함수를 바인딩할 때, 선택한 DOM 요소가 이미 그려져 있을 때만 제대로 동작합니다. 선택한 DOM 요소가 없다면 함수가 바인딩될 대상이 없기 때문에 동작하지 않습니다.
표 안에 있는 완료 버튼은 동적으로 생성되므로, 다른 방법으로 click 핸들러를 바인딩해야 합니다. 이럴 때에는 다음과 같이 구현할 수 있습니다.
$(element).on('click', element, function)
on 함수는 선택한 요소에 이벤트를 바인딩하는 역할을 합니다. 그 인자로 이벤트 종류, 이벤트가 반영될 요소 셀렉터, 그리고 핸들러가 들어갑니다. 이벤트가 반영될 요소 셀렉터는 선택한 요소 하위 요소가 됩니다. 그래서 선택한 요소는 click 핸들러를 바인딩할 대상의 부모인 tbody가 되고, 이벤트가 반영될 요소 셀렉터로 완료 버튼을 줍니다.
click 핸들러에서 this는 클릭한 요소를 가리킵니다. 버튼을 클릭했다면 this는 버튼이 되고, 그 부모는 버튼을 가지고 있는 td가 됩니다. 선택한 행의 각 열의 값을 가져오기 위해서 td의 siblings를 구합니다.
$(element).parent(): 선택한 요소의 부모 요소를 가져옵니다.$(element).siblings(element): 선택한 요소와 같은 레벨에 있는 요소를 가져옵니다.
많은 siblings 중에서 인덱스를 선택하려면 siblings 함수의 인자로 셀렉터를 줍니다. 인덱스는 첫 번째 위치에 있으므로 :first 셀렉터로 가져올 수 있습니다. 해당 인덱스 값은 text 함수로 얻어낼 수 있습니다.
$(element).text(): 선택한 요소의 하위 텍스트를 가져옵니다.
취소선은 CSS로 표현할 수 있습니다. style.css 파일에서 complete 클래스에 text-decoration: line-through 속성을 줍니다.
complete 요청이 끝나면, add 요청과 마찬가지로 get_list 함수를 호출합니다. 이 때, 완료한 행의 내용에 취소선을 긋기 위해서 내용을 넣을 td에 아까 CSS 속성을 정의한 complete 클래스를 줍니다. ToDo 항목의 complete 키가 true 일 경우, 완료를 의미하므로 class 속성에 complete을 줍니다. false일 경우, 아무 것도 주지 않습니다.
삭제 기능의 의도하는 동작 시나리오는 다음과 같습니다.
- 완료할 할 일의 행에서 삭제 버튼을 누릅니다.
- 선택한 할 일이 목록에서 사라집니다.
삭제 기능의 구현은 완료 기능의 구현과 크게 다르지 않습니다. 이벤트가 반영될 요소 셀렉터만 바꿔주면 구현이 완료됩니다.