[javascript] Backbone.js에서 모델과 뷰의 양방향 데이터 바인딩 방법

22 Nov 2023

javascript

Backbone.js는 JavaScript 기반의 웹 애플리케이션을 개발하기 위한 MVC 프레임워크입니다. 이 프레임워크를 사용하면 모델과 뷰 간의 데이터 바인딩을 간단하게 설정할 수 있습니다. 이번 글에서는 Backbone.js에서 양방향 데이터 바인딩을 구현하는 방법을 알아보겠습니다.

모델과 뷰 생성하기

먼저, Backbone.js에서는 모델과 뷰를 생성해야 합니다. 모델은 데이터의 상태를 저장하고 관리하며, 뷰는 데이터를 보여주고 사용자와의 상호작용을 처리합니다.

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

var MyView = Backbone.View.extend({
  el: '#my-view',
  
  events: {
    'input #name-input': 'updateName',
    'input #age-input': 'updateAge'
  },
  
  initialize: function() {
    this.listenTo(this.model, 'change', this.render);
  },
  
  render: function() {
    this.$('#name-input').val(this.model.get('name'));
    this.$('#age-input').val(this.model.get('age'));
  },
  
  updateName: function(event) {
    this.model.set('name', event.target.value);
  },
  
  updateAge: function(event) {
    this.model.set('age', event.target.value);
  }
});

var myModel = new MyModel();
var myView = new MyView({ model: myModel });
myView.render();

양방향 데이터 바인딩 구현하기

위의 코드에서는 모델과 뷰를 생성하고 뷰가 모델의 변경 이벤트를 감지하도록 설정하였습니다. 이제 양방향 데이터 바인딩을 구현하기 위해 모델의 변경이 뷰에 반영되도록 업데이트 함수를 작성합니다.

updateName: function(event) {
  this.model.set('name', event.target.value);
},

updateAge: function(event) {
  this.model.set('age', event.target.value);
}

뷰의 입력 요소의 값이 변경되면 해당 값을 모델에 설정하여 모델의 변경 이벤트가 발생하도록 합니다.

initialize: function() {
  this.listenTo(this.model, 'change', this.render);
},

render: function() {
  this.$('#name-input').val(this.model.get('name'));
  this.$('#age-input').val(this.model.get('age'));
}

뷰의 render 함수에서는 모델의 값을 뷰의 입력 요소에 설정하여 변경된 값을 화면에 반영합니다.

마무리

위의 코드를 사용하면 Backbone.js에서 모델과 뷰 간의 양방향 데이터 바인딩을 구현할 수 있습니다. 모델의 값이 변경되면 뷰에 자동으로 반영되며, 뷰의 입력 요소의 값이 변경되면 모델에 자동으로 반영됩니다.

Backbone.js는 이외에도 다양한 기능을 제공하고 있으며, 공식 문서나 온라인 자료를 참고하여 더 깊이있는 이해를 할 수 있습니다.

참고 자료: