728x90
반응형
Marionette.js Region 을 통한 Life Cycle 관리

Marionette의 Region 객체는 view의 render나 jQuery 객체의 html()을 사용하여 DOM에 뷰를 삽입하는 코드역시 

보일러 플레이트 코드로 보고 이를 제거해준다.


- 보일러 플레이트 코드 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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);
cs


- Region 이용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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);
cs


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

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



728x90
반응형

'Backbone.js' 카테고리의 다른 글

Marionette.js 의 메모리관리  (0) 2015.02.27
클라이언트 측 MVC 또는 MV* 란?  (0) 2015.02.10
SPA(Single Page Application) 이란?  (0) 2015.02.10

+ Recent posts