Marionette.js에서 데이터 바인딩을 구현하는 가장 일반적인 방법은 Backbone.js의 Model과 View를 활용하는 것입니다. 먼저, 데이터를 담는 Model을 생성합니다. 이 Model은 데이터의 상태를 관리하고 변경 사항을 감지할 수 있게 해줍니다. 예를 들어, 다음과 같이 Model을 생성할 수 있습니다.

const MyModel = Backbone.Model.extend({
  defaults: {
    name: '',
    age: 0
  }
});

Model의 defaults 속성을 사용하여 기본 데이터를 정의할 수 있습니다. 이제 View를 생성하고 해당 View에 Model을 바인딩합니다. 예를 들어, 다음과 같이 View를 생성할 수 있습니다.

const MyView = Marionette.View.extend({
  template: '#my-template',
  modelEvents: {
    'change:name': 'render'
  },
  initialize: function() {
    this.listenTo(this.model, 'change:age', this.render);
  }
});

View의 template 속성에는 데이터를 표시하기 위한 HTML 템플릿을 지정할 수 있습니다. modelEvents 속성을 사용하여 Model의 변경 이벤트를 처리하고, initialize 메서드에서 Model의 변경 이벤트에 대한 리스너를 등록할 수 있습니다.

마지막으로, Model과 View를 연결하고 원하는 요소에 데이터를 표시합니다. 예를 들어, 다음과 같이 Model의 인스턴스를 생성하고 View와 연결하고 요소에 데이터를 표시할 수 있습니다.

const myModel = new MyModel({
  name: 'John',
  age: 30
});

const myView = new MyView({ model: myModel });
myView.render(); // View를 렌더링하여 데이터를 표시

이제 Model의 데이터가 변경될 때마다 View가 자동으로 업데이트되는 것을 확인할 수 있습니다.

Marionette.js의 데이터 바인딩 기능을 사용하여 웹 애플리케이션에서 데이터를 간편하게 관리하고 업데이트할 수 있습니다. 또한, 추가적으로 Marionette.js에서 제공하는 컬렉션 바인딩(Collection Binding)과 템플릿 엔진을 사용하여 더욱 강력한 데이터 바인딩을 구현할 수도 있습니다. Marionette.js 공식 문서와 예제 코드를 참조하면 더 다양한 데이터 바인딩 기능을 배울 수 있습니다.