[javascript] Marionette.js에서 사용되는 이벤트 핸들링(Event Handling) 방법은 어떤 것들이 있는가?

29 Nov 2023

javascript

Marionette.js는 Backbone.js 기반의 JavaScript 애플리케이션을 구축하기 위한 프레임워크입니다. Marionette.js에서는 다양한 방법으로 이벤트 핸들링을 할 수 있습니다. 여기에는 다음과 같은 방법들이 있습니다:

events 객체 사용: Marionette.js에서는 뷰(View) 내부에 events 객체를 정의하여 이벤트를 처리할 수 있습니다. events 객체에 이벤트와 처리할 메서드를 매핑하여 사용할 수 있습니다. 예를 들어, 다음과 같이 사용할 수 있습니다:

const MyView = Marionette.View.extend({
  events: {
    'click button': 'handleButtonClick'
  },
  handleButtonClick() {
    // 버튼 클릭 이벤트 처리 로직
  }
});

triggers 객체 사용: triggers 객체는 뷰 내부의 events와 유사한 방식으로 작동하지만, 다른 뷰에서 이벤트를 트리거할 때 사용됩니다. 예를 들어, 다음과 같이 사용할 수 있습니다:

const ChildView = Marionette.View.extend({
  template: '#child-template',
  triggers: {
    'click button': 'button:clicked' // 부모 뷰에 'button:clicked' 이벤트 전달
  }
});

const ParentView = Marionette.View.extend({
  template: '#parent-template',
  childViewEvents: {
    'button:clicked': 'handleButtonClick' // 자식 뷰로부터 전달된 이벤트 처리
  },
  handleButtonClick() {
    // 버튼 클릭 이벤트 처리 로직
  }
});

listenTo 메서드 사용: Marionette.js에서는 listenTo 메서드를 통해 이벤트를 수신하여 처리할 수 있습니다. 예를 들어, 다음과 같이 사용할 수 있습니다:

const model = new Backbone.Model();

const MyView = Marionette.View.extend({
  initialize() {
    this.listenTo(model, 'change', this.handleModelChange);
  },
  handleModelChange() {
    // 모델 변경 이벤트 처리 로직
  }
});

위에서 소개된 방법들은 Marionette.js에서 이벤트 핸들링을 다루는 몇 가지 예시입니다. Marionette.js는 다양한 다른 방법들을 제공하기도 하므로, 필요에 따라 공식 문서를 참고하시기 바랍니다.

참고 자료:

Marionette.js 공식 문서: http://marionettejs.com/docs/