[TodoMVC] Step 6. To do list Remove Item Completed / list 에서 완료된 항목 삭제하기

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

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

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

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

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

view.js code>

//event: removeCompleted
//handler: controller.removeCompletedItems
} else if(event === 'removeCompleted'){
    console.log('View.prototype.bind.removecompleted execute!');
    self.$clearCompleted.addEventListener('click', function(){
        handler();
    });
}

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

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

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

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

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

controller.js code>

this.view.bind('removeCompleted', function(){
    self.removeCompletedItems();
});

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

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

controller.js code>

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);
        });
    });
};

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

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

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

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

>> javascript array forEach >>

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

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

-The End-

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