BackboneJS 서브 뷰 사용하기
BackboneJS는 MV* 패턴을 사용하는 경량 프레임워크로 메인뷰에서 서브뷰를 사용할 수 있다. 서브뷰를 사용하면 경우에 따라 유지보수하기 좋은 좀 더 모듈화된 코드를 만들 수 있을 것 같다.
서브뷰 사용을 위해 우선 Backbone.View를 확장하여 메인뷰와 서브뷰를 생성하고 메인 뷰에서 서브뷰에 사용할 모델을 꺼내어 해당 모델이 사용될 서브뷰를 이터레이션으로 돌리면된다.
이터레이션은 underscore의 _.each를 사용하는데(obj, iteratee, context) 세개의 파라미터로 obj로 모델 데이터를, iteratee로 콜백함수를, context는 그대로 컨텍스트를 넣어주고 콜백함수 내에서 서브뷰의 인스턴스를 생성하여 메인뷰에 append 시키면 된다.
중요한 점은 서브뷰에서 사용될 모델을 서브뷰 인스턴스 생성시 생성자에 파라미터로 전달하고 서브뷰의 render메소드에서 return this; 컨텍스트를 리턴해 주어야 backbone.view가 가지고있는 el에 참조된 엘리멘트를 사용할 수 있다.
*서브뷰 기능만을 구현하기 위해 나머지 코드들은 추가하지 않았습니다.
Backbone.Model
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
var Model = Backbone.Model.extend({ defaults : { items : [ { 'title':'title1' }, { 'title':'title2' }, { 'title':'title3' }, { 'title':'title4' } ], desc : "default description" } }); |
테스트를 위한 임의로 모델을 생성.
Backbone.View(main view)
|
1 2 3 4 5 6 7 8 9 |
var ListView = Backbone.View.extend({ render : function(){ var items = this.model.get('items'); _.each(items, function(item){ var itemView = new ItemView({model:item}); this.$el.append( itemView.render().el ); }, this); } }); |
Backbone.View(sub view)
|
1 2 3 4 5 6 7 8 9 10 11 |
var ItemView = Backbone.View.extend({ tagName : 'li', // 템플릿 사용도 가능하나 사용을 위해서 아래 코드 수정이 필요하다. // todoTpl : _.template( $('#item-template').html() ), render : function(){ this.$el.html(this.model.title); return this; // 템플릿 사용시 해당 코드의 경우 this의 리턴없이 엘리먼트를 리턴하면 된다. // return this.todoTpl(this.model); } }); |
실행
|
1 2 3 |
var model = new Model(), list = new ListView({el:$('#todo'), model:model}); list.render(); |
실행해보면 아래와 같이 서브뷰에서 랜더된 li가 메인뷰에 append되어 노출되고 있다.
