[marionette.js] 이벤트 관련 정리

마리오네트에는 이벤트를 통해 객체들이 통신을 할 수 있게 돕는 시스템이 있다.

이벤트를 발생시키는 방법은 여러가지인데, 

이 차이점이 헷갈려서 한번 정리해보고자 한다.

- trigger()

this.trigger('eventName');

위와 같이 이벤트가 발생하게 되면,

해당 view의 상위 view에서 이벤트 핸들링을 할 수 있다.

- triggerMethod()

this.triggerMethod('childView:eventName');

위와 같이 이벤트가 발생되면,

해당 view + 해당 view의 상위 view에서 이벤트 핸들링을 할 수 있다.

또한 triggerMethod로 이벤트 발생 시, 

이벤트 명에 : 문자를 이용하여 구분하는 경우 

마리오네트에서 : 문자를 기준으로 하여 자동으로 핸들링 메소드명을 변환하여 만들어준다.

위의 예시로 설명을 하자면, 

다음의 메소드에서 위의 이벤트 핸들링을 하게될 것이다.

onChildViewEventName : function() {

// 블라블라~~

}

핸들링 메소드 네이밍 규칙은 다음과 같다.

on + : 스플릿 첫번째 문자 (첫글자는 대문자) + 스플릿 두번째 문자 (첫글자는 대문자)

물론 : 문자를 여러번 사용해도 무관하다.

- triggers

triggers : {

'click @ui.btn' : 'eventName'

}

triggers는 trigger와 triggerMethod와 발생시키는 모양이 조금 다르다.

trigger와 triggerMethod는 메소드로 이벤트를 발생시키는데,

triggers는 메소드는 아니다. 구문이다.

events 구문과 사용하는 모양은 비슷하다. 

events: {

'click @ui.btn' : function() {

console.log("click btn!");

}

}

그래서 triggers의 정체는 무엇이란 말인가!

triggers 구문에서는 ui 이벤트 발생시 상위 view로 eventName의 이벤트를 발생(trigger)시킨다.

events 구문에서는 ui 이벤트에 대한 핸들링 내용을 기술하는 것과의 차이점이 있다.

- spawn()

this.spawn('eventName');

spawn을 이용해서도 이벤트를 발생시킬 수 있다. 

trigger(), triggerMethod()와는 다르게 

spawn()은 courier를 behavior로 선언을 해야만 이벤트가 발생된다는 특징이 있다.

(courier에 대해서는 추후에 다시 정리해봐야 할 듯.)

또한 spawn()으로 이벤트 발생 시, 

상위 view 뿐만 아니라 그 상위 view로 이벤트 버블링이 발생되어 타고 올라간다는 특징도 있다.