Backbonejs View 사이의 대화는 어떻게 할까? (2)

저번 포스팅에서는 부모 View를 통해서 이벤트를 전달 하는 방식에 대해 알아 보았다.

이번 포스팅에서는 Backbone Event를 이용하여 View간에 대화를 시켜 보도록 해보자.

- Layout View에서 생성된 A, B View에게 Backbone Event를 전달

- A에서는 B에게 전달할 이벤트를 Backbonejs Event를 통해서 전달 한다.

자바스크립트 구현은 아래와 같다:

var LayoutView = Backbone.View.extend({
    initialize: function() {
        this.eventBus = _.extend({}, Backbone.Events);
        this.mainView = new MainView({
            eventBus: eventBus
        });
        this.sidebarView = new SidebarView({
            eventBus: eventBus
        });
    }
});

var SidebarView = Backbone.View.extend({
    events: {
        'click': 'onClick'
    },
    initialize: function(options) {
        this.eventBus = args.eventBus;
    },
    onClick: function() {
        this.eventBus.trigger('mainViewRender')
    }
});

var MainView = Backbone.View.extend({
    initialize: function(options) {
        this.eventBus = args.eventBus;
        this.listenTo(this.eventBus, 'mainViewRender', this.render);
    },
    render: function() {
        console.log('클릭이 발생 했어요!');
    }
});

해당 예제는 Global Backbonejs Event기반으로 EventBus를 복사 한다. 그리고 자식 View에게 이벤트를 전달 한다.

즉, 자식View A와 B는 부모 View에서 생성된 EventBus를 통해서 이벤트를 주고 받는다.

A가 B에게 이벤트를 전달 하는 방식을 다시 정리 해보면 아래와 같다.

A -> EventBus -> B

장점

1. 부모 View의 객체를 접근 하지 않기 때문에 부모 View 오염될 가망성이 줄어 든다.

2. A와 B의 이벤트 통신 체계가 Backbonejs Event를 통해서 전달 받는다. (이전 포스팅 방식에서 개선된 방식)

3. Event driven방식으로 처리 된다. (Pub/Sub 구조가 가능 해진다.) 

4. 브로드캐스팅 메세지 전달이 가능 하다

단점

1. 부모 View에서 아직도 자식 View에게 EventBus를 일일이 부여 해야 한다.

2. 이벤트가 어디서 발생 된건지 추적이 힘들다. (A와 B뷰 사이에서 이벤트를 발생 시키면 찾기 쉬우나 C, D, E View들이 늘어난 경우 Source를 찾을 수 없다)

이전 포스팅에서 발생된 문제를 해결 하긴 하지만 아직 완벽 하게 해결 했다고 볼 수 없다.

다음 포스팅에서는 좀 더 전역적인 EventBus를 사용하여 개선된 버전을 만들어 보자