2015-02-06 4 views
2

부모 생성자를 통해 뷰를 상속 :만들기 백본 내가 2 백본 전망이

  • VideoView를 지켜 보면서을 (확장 Backbone.View)
  • ExpandingVideoView (VideoView를 지켜 보면서 확장)

I가 동영상의 여러 유형이 내 사이트 중 일부는 data 속성 (예 : data-has-overlay, data-is-expanded)을 기반으로 한 다른 행동을 보입니다.

전달 된 요소를 검사하고 적절한 경우 하위 뷰에 위임 할 VideoView에서 모두 초기화하려고합니다.

질문 :

  • 이를 용이하게하기 위해 내장 Backbone.js에 있나요?
  • 우아한 해결책이 있습니까? 아니면 DOM 수준에서 올바른보기를 만들 때 (즉, 특정 데이터 속성을 가진 비디오 요소를 검색하고 그에 따라 인스턴스화하는) 초기 생성 코드를 변경해야합니까?

예 BB 코드 :

self.$el.find('.Video').each(function (index, el) { 

    self.videoViews.push(new VideoView({ el: el })); 
}); 
:

<div class="Video" data-src="..." data-is-expanded data-has-controls>...</div> 
<div class="Video" data-src="..." data-has-controls>...</div> 
<div class="Video" data-src="..." data-is-expanded>...</div> 

비디오는 다음과 같은 기능에 만들어집니다

var VideoView = Backbone.View.extends({ 

    initialize: function (options) { 

    // something here to check the el and create ExpandedVideoView if appropriate 

    if (this.$el.data('is-expanded')) { 
     // Create ExpandedVideoView instead..? 
    } 
    }, 

    foo: function() { return 'foo'; } 
}); 

var ExpandedVideoView = VideoView.extends({ 

    initialize: function() {}, 

    bar: function() { return 'bar'; } 
}); 

그리고 태그는 다음과 같이 보입니다

(여기서 self은 상위보기입니다.)

답변

2

용이하게하기 위해 Backbone.js에 내장 된 것이 있습니까?

짧은 숫자. 그러나 형식에 따라 다르게 형식을 지정하는 '목록보기'유형의보기를 생성하려는 경우 Backbone.Marionette의 CollectionView를보고 그로부터 영감을 얻을 수 있습니다.

Marionette의 콜렉션 뷰는 다른 하위 뷰의 렌더링을 지원하지 않지만 쉽게 수행 할 수 있도록 기본 클래스의 메소드를 재정의 할 수 있습니다.

더 복잡한보기 구조가 필요하다면 Marionette을 볼 가치가 있습니다.