티스토리 뷰


Step 6. To do list에서 Completed Item 제거하기

남은 Step 들은 UX를 고려한 기능추가이다.

이번 Step 에서는 완료된 항목들을 선택해서 삭제해주는 step이다.


1단계 . View.js 파일을 작성한다.

1-1. 우선 bind에 removeCompleted 이벤트를 등록해준다.

view.js code>

1
2
3
4
5
6
7
8
//event: removeCompleted
//handler: controller.removeCompletedItems
else if(event === 'removeCompleted'){
    console.log('View.prototype.bind.removecompleted execute!');
    self.$clearCompleted.addEventListener('click'function(){
        handler();
    });
}
cs


버튼을 select 해야하므로 view 생성자 함수에 버튼을 select 해둔다.

그리고 bind 함수에 해당하는 이벤트를 등록시켜주자.

clearCompleted 버튼을 클릭하면 전달받은 handler가 실행되도록 하자.




2단계 . controller.js 파일을 작성한다.

2-1. 생성자 함수에 bind를 추가해준다.

controller.js code>

1
2
3
this.view.bind('removeCompleted'function(){
    self.removeCompletedItems();
});
cs


이벤트를 bind 하기 위해 생성자 함수에 bind 를 추가해준다.



2-2. prototype에 removeCompletedItems를 추가해준다.

controller.js code>

1
2
3
4
5
6
7
8
9
Controller.prototype.removeCompletedItems = function(){
    console.log('Controller.prototype.removeCompletedItems execute!');
    var self = this;
    self.model.read({completed: true}, function(data){
        data.forEach(function(item){
            self.removeItem(item.id);
        });
    });
};
cs


삭제하려는 조건을 명시하여 model에서 먼저 읽어오는 과정이 필요하다.

그 조건을 {completed : true }로 전달하자.

storage에는 find 메소드로 해당 조건이 전달될 것이다.

filter를 통해 true에 해당하는 값에 대해서 forEach메소드를 통해 removeItem 메소드를 실행시키자.

>> javascript array forEach >>

Controller에 이전에 정의했던 removeItem 메소드로 전달하였다.

이 메소드는 completed : true 인 listItem에 대해서만 진행될 것이다.



-The End-
>> Step 7. ECMA 6 문법으로 Refactoring 하기 (진행중) >>


«   2021/09   »
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30    
Total
1,478,553
Today
396
Yesterday
490