뷰 자신이 자신을 지워야 할 때를 감지하려면 어떻게 해야하는가?

상황

• 현재 user_menu_view 는 딱 한개만 만들어지도록 수정하고 있다.

• 여기에서 발생하는 문제는 user_menu_view 객체가 자기 자신이 필요없어짐을 감지하고 객체 자체를 지워야하는데 자기 자신이 필요가 없어짐을 어떻게 파악하는지에 대한 아이디어가 떠오르지 않고 있었다는 것.

해결

• 여기에 IWOO 님이 아주 좋은 아이디어을 생각해주셨는데, 뷰가 아닌 모델과 컬렉션에 이벤트(listenTo)를 걸어두자는 것이었다. 그리고 만약 user_menu_view가 지워져야 할 경우는 걸어 놓은 리스닝에 의해 걸리고 뷰 자기 자신을 지우면 된다 라고 말씀해주셨다.

• 코드를 기반으로 설명해보자면, 여기에 관련되는 파일과 객체는 아래와 같다.

  • user.js 의 user 모델

    • 모델 자체에는 아무런 listenTo 가 걸려있지 않다.

  • users.js 의 users 컬렉션

    • 컬렉션 자체에는 아무런 listenTo 가 걸려있지 않다.

  뷰에서 모델과 컬렉션에 listenTo를 한다. 해당 이벤트 트리거가 일어난다고 해서 절대로 그 모델과 컬렉션에 함수가 구현되어 있는게 아니다. 이벤트가 트리거되면 해당 뷰에서 작업을 수행한다.

  • user_unit_view.js 의 UserUnitView 뷰

    • this.model 에 create_user_menu 라는 이벤트가 걸려있다.

      • create_user_menu 함수를 실행한다.

    • 해당 뷰의 DOM 요소 자체에 click 이벤트가 걸려있다.

      • destroyAndCreateUserMenu 함수를 실행한다.

  • user_menu_view.js 의 UserMenuView 뷰

    • this.parent.online_users 컬렉션에 destroy_user_menu_all 이벤트가 걸려있다. 이벤트 트리거의 결과로 close 함수가 실행되고 이 함수는 뷰 자신을 삭제한다.

• 아래는 실행되는 순서다.

  1. 웹 페이지의 user_unit_view 를 마우스로 클릭한다.

  2. 해당 DOM 요소에 걸려있던 click event 가 발동한다.

     1. destroyAndCreateUserMenu 가 발동한다. 해당 함수는 컬렉션과 모델 각각의 이벤트를 트리거 해주는 역할만한다.

  3. 컬렉션의 destroy_user_menu_all 이벤트를 trigger 한다. 이 함수가 실행되면 user_menu_view 에 있는 close 함수가 실행되면서 기존 메뉴뷰가 삭제된다.

  4. 이후 모델의 create_user_menu 를 trigger 한다. 그러면 이제 해당 모델의 정보를 이용해서 user_menu_view 를 만든다.