Backbonejs - 이벤트에 따른 콜백함수 호출하기

1. on() 이벤트

import Backbone from 'backbone';

const FruitModel = Backbone.Model.extend({
    defaults: {
        name: 'melon',
        price: 5000
    }
});

const fruitModel = new FruitModel();
fruitModel.set({ name: 'water melon', price: 20000 }); // 속성 변경

fruitModel.on('change', function(e) { // 모델 속성 변경 이벤트
    console.log(e.toJSON());
});

• on() : 모델에 발생하는 이벤트에 따라 콜백함수를 연결해주는 메서드이다.

여기서 과일 모델의 속성을 이름은 수박, 가격을 2만원으로 수정하면 change이벤트가 발생하여 콘솔에 바뀐 모델 속성의 값을 찍어준다.

 

1-1. 특정 속성 변경 이벤트 - change

fruitModel.on('change:name', function(e) { // 모델 속성 변경 이벤트
    console.log(e.toJSON());
});

// change:[속성명]

• change:[속성명] : 속성명에 들어간 속성값이 변경되면 change 이벤트가 실행된다.

1-2. Model 추가 이벤트 - add

import Backbone from 'backbone';
import $ from 'jquery'

const FruitModel = Backbone.Model.extend({
    defaults: {
        name: 'melon',
        price: 5000
    }
}); // Model

const FruitCollection = Backbone.Collection.extend({
    model: FruitModel
}); // Collection

const fruitCollection = new FruitCollection();
fruitCollection.add({ id: 1, name: 'water melon', price: 20000 }); // Collection에 Model 추가

// Collection에 Model 추가시 add 이벤트 발생
fruitCollection.on('add', function() {
    console.log('collection add event');
});

• add : 컬렉션에 모델이 추가되면 add 이벤트가 발생한다.

1-3. Model  제거 이벤트 - remove

// Collection에 Model 제거시 remove 이벤트 발생
fruitCollection.on('remove', function() {
    console.log('collection model remove event');
});

• remove : 컬렉션에 속해있는 모델이 제거되면 발생한다.

1-4. Collection의 Model 초기화 이벤트 - reset

// Collection 초기화
fruitCollection.on('reset', function() {
    console.log('collection reset event');
});

• reset : 컬렉션에 있는 모델들이 초기화되어 컬렉션에 빈 배열값이 들어가게 되면 발생한다.

on()이벤트는 첫번째 파라미터에 이벤트명을 쓰고,  두번째 파라미터에 콜백 함수를 쓰면  완성되는 간단한 이벤트이다. add, change 이외에도 destroy 등의 이벤트도 존재하는데 첫번째 파라미터에 해당 이벤트명을 쓰면 쉽게 구현할  수 있다.

 

2. off() 이벤트

할당된 이벤트를 제거할 때 off()를 사용한다.

const fruitModel = new FruitModel();
fruitModel.on('change', function() {
    console.log('fruit change');
})

fruitModel.off('change')

fruitModel.set("name", "orange")

fruitModel의 이름 속성을 orange로 변경하여도 change 이벤트가 발생하지 않는다. off()로 change 이벤트를 제거했기 때문에 속성값이 변경되어도 아무런 이벤트가 실행되지 않는다.

off() 이벤트는 사용자가 직접 생성한 커스텀 이벤트를 삭제할 때 유용하다. 하지만 기본적으로 할당된 add, change 등의 이벤트를 제거는데 사용하는건 추천하지 않는다.

 

3. trigger() 이벤트

기존에 존재하는 add, change, remove 등의 이벤트가 아닌 새로운 이벤트를  만들고 호출할 때 사용한다.

먼저 on()을 통해 커스텀 이벤트를 생성한 후, 해당 이벤트를 호출하고자 할 때, trigger()에 이벤트명을 입력하여 이벤트를 실행한다.

const fruitModel = new FruitModel();
fruitModel.on('fruit-event', function() {
    console.log('fruit event on!')
})

fruitModel.trigger('fruit-event')

trigger로 인해 커스텀 이벤트 fruit-event가 실행되어 콘솔에 로그가 찍히는 것을 확인할 수 있다.

 

4. once() 이벤트

생성한 커스텀 이벤트를 한번만 실행하고자 할 때 사용한다.

const fruitModel = new FruitModel();
fruitModel.once('fruit-event', function() {
    console.log('fruit event on!')
})

fruitModel.trigger('fruit-event')
fruitModel.trigger('fruit-event')
fruitModel.trigger('fruit-event')

trigger()로 fruit-event를 세번 실행했지만 로그는 한 번만 찍히는 것을 확인할 수 있다. once()로 생성한 이벤트이기 때문에 fruit-event를 한번만 실행된다.

 

5. listenTo() 이벤트

on, off, triger, once 이벤트는 Model과 Collection을 기반으로 실행된 이벤트인 반면에 listenTo() 이벤트는 View를 기반으로 실행되는 이벤트이다.

import Backbone from 'backbone';

const FruitModel = Backbone.Model.extend({
    defaults: {
        name: 'mango',
        price: '1000'
    },
});

const FruitView = Backbone.View.extend({  });

const fruitModel = new FruitModel();
const fruitView = new FruitView();

// listenTo 이벤트
// (model명, 이벤트, 콜백 함수)
fruitView.listenTo(fruitModel, 'change:price', function() {
    console.log('model value change')
})

fruitModel.set("price", 2000)

listenTo는 첫번째 파라미터로 지정된 모델에 특정한 이벤트가 발생하게 되면 콜백 함수를 실행하는 이벤트이다. 첫번째 파라미터에는 모델명, 두번째 파라미터에는 이벤트명, 세번째 파라미터는 콜백함수를 입력하여 생성한다. set()으로 인해 모델의 price속성의 값이 변경되었기에 listenTo 이벤트의 콜백함수가 실행되어 로그가 찍히는 것을 확인할 수 있다.

listenTo를 활용하는 방법에는 세번째 파라미터에 렌더링 함수를 넣어주는 것이다. listenTo 이벤트는 모델의 변화를 감지하여 뷰를 쉽게 렌더링하게 해주는 이벤트이기 때문에 렌더링 함수를 넣어 사용한다.

 

6. stopListening() 이벤트

listenTo로 생성된 이벤트를 제거한다.

const fruitModel = new FruitModel();
const fruitView = new FruitView();

fruitView.listenTo(fruitModel, 'change:price', function() {
    console.log('model value change')
}) // listenTo 이벤트 생성

fruitView.stopListening(fruitModel); // fruitModel의 listenTo 이벤트 제거
fruitView.stopListening(); // 해당 View의 모든 listenTo 이벤트 제거

• stopListening(모델명) : 해당 모델을 기반으로 변화를 감지하는 이벤트 제거
• stopListening() : 해당 View에 등록되어 모델 변화를 감지하는 모든 이벤트 제거

---

참고 사이트 : 

https://backbonejs.org/#Events

Backbone.js

 

https://stackoverflow.com/questions/12279236/backbone-js-collection-events

backbone.js collection events

 

https://www.sitepoint.com/backbone-basics-events/

Backbone.js Basics: Bringing an App to Life with Events — SitePoint