[javascript] Backbone.js에서 데이터 바인딩(Data Binding) 방법

22 Nov 2023

javascript

Backbone.js는 웹 응용 프로그램의 구조를 관리하기 위한 JavaScript 라이브러리입니다. 데이터 바인딩은 Backbone.js를 사용하여 데이터 모델과 뷰를 연결하는 중요한 개념입니다. 데이터 모델이 변경되면, 연결된 뷰는 자동으로 업데이트됩니다. 이것은 데이터의 상태 변화를 실시간으로 반영하는 데 매우 유용합니다.

Backbone.js에서 데이터 바인딩을 설정하는 방법은 다음과 같습니다.

1. 모델과 뷰 생성

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

var View = Backbone.View.extend({
  el: '.container',

  events: {
    'input #name-input': 'updateName',
    'input #age-input': 'updateAge',
    'input #email-input': 'updateEmail'
  },

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

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

  updateEmail: function(e) {
    this.model.set('email', e.target.value);
  },

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

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

var model = new Model();
var view = new View({ model: model });
view.render();

2. 뷰 업데이트

뷰가 모델에 대한 변경 사항을 반영하기 위해서는 뷰의 render() 메소드를 호출해야 합니다. 이 메소드는 모델에 저장된 데이터를 뷰의 엘리먼트에 업데이트합니다. 그러면 사용자가 입력한 값을 모델에 저장하는 뷰의 이벤트 핸들러(updateName, updateAge, updateEmail)들이 호출됩니다.

3. 모델 변화 감지

뷰는 모델의 변경 사항을 감지하기 위해 model의 ‘change’ 이벤트를 구독합니다. 모델의 어떤 데이터가 변경되면, ‘change’ 이벤트가 발생하고 연결된 뷰의 render() 메소드가 호출됩니다. 이는 뷰가 업데이트된 데이터를 자동으로 반영하게 해줍니다.

결론

Backbone.js를 사용하여 데이터 바인딩을 구현하는 방법을 살펴보았습니다. 데이터 모델과 뷰를 연결하여 모델의 변경 사항을 실시간으로 반영하는 것은 웹 응용 프로그램 개발에 매우 유용한 기능입니다. Backbone.js는 이러한 데이터 바인딩을 간편하게 구현할 수 있는 강력한 도구입니다.

더 자세한 내용을 알고 싶다면 Backbone.js 공식 사이트를 참조해주세요.