Marionette.js Region 을 통한 Life Cycle 관리

Marionette.js Region 을 통한 Life Cycle 관리

var Sanghoon = new Person({
    firstName: '이',
    lastName: '상훈',
    email: 'devsh@nara.co.kr'
});
 
var MyView = Marionette.ItemView.extend({
    template: '#my-view-template'
});
 
var myView = new MyView({
    model: Sanghoon
});
 
myView.render();
 
//  DOM에 뷰를 넣는다.
$('#content').html(myView.el);

- Region 이용

var Sanghoon = new Person({
    firstName: '이',
    lastName: '상훈',
    email: 'devsh@nara.co.kr'
});
 
var MyView = Marionette.ItemView.extend({
    template: '#my-view-template'
});
 
var myView = new MyView({
    model: Sanghoon
});
 
//  Region 인스턴스를 만들고, 어떤 DOM 엘리먼트를 관리할지 지정한다.
var myRegion = new Marionette.Region({
    el: '#content'
});
 
//  Region 내의  뷰를 보여준다.
var view1 = new MyView();
myRegion.show(view1);
 
//  이 코드 어디선가 다른 뷰를 보여준다.
var view2 = new MyView();
myRegion.show(view2);

얼핏봐서는 코드가 더 늘어난것 처럼 보일수도있겠다. 하지만 region객체를 이용하면 더이상 render 메서드를 호출할필요가없다 show() 메서드 내부에서 render() 를 호출 하고 뷰의 el을 가지고와서 DOM엘리먼트에 추가시킨다. 거거이ㅔ 고스트뷰가 되지않도록 show() 메서드 내에서 이벤트를 close 시킨다. 

Marionette.View 가아닌 Backbone.View 를 사용하였다 하더라도 close 구현체가 존재하지 않는다면 Backbone.View의 내장 메서드인 remove를 호출하여 이벤트를 안전하게 제거한다.