백본/마리오네트 - 한 지역의 여러 레이아웃을 처리합니다.

Question

두 가지 기본 페이지 레이아웃이 있습니다. 하나는 대부분의 페이지에 사용되는 기본 레이아웃이고 다른 하나는 머리글/바닥 글 등이없는 베어 레이아웃입니다. 예를 들어 로그인 페이지에 사용됩니다. 앞으로는 더 많은 것이있을 수 있습니다.

나의 현재 라우터 :

var AppRouter = Backbone.Router.extend({ 
    routes: { 
     'login': 'login', 
     'main': 'main' 
    }, 

    login: function(){ 
     var mainLayoutView = new MainLayoutView({ 
      'layout': 'bare' 
     }); 
     App.Notes.mainLayoutContainer.show(mainLayoutView); 
    }, 

    main: function(){ 
     var mainLayoutView = new MainLayoutView({ 
      'layout': 'default' 
     }); 
     App.Notes.mainLayoutContainer.show(mainLayoutView); 
    } 
}); 

어떻게 옵션에 지정된 레이아웃을 렌더링 할 수 있도록 MainLayoutView의 구현을 접근해야? 또는 실제로 두 개의 템플릿을 처리하기 위해 두 개의 별도 레이아웃이 있어야합니까? 그들은 분명히 많은 기능을 공유 할 것이므로, 나는 하나만 갖고 싶습니다.

Answer 1

나는 이것을 처리하는 가장 좋은 방법을 찾은 것 같아요. "초기화"에서 템플릿을 동적으로 설정하기로 결정했습니다.

var MainLayoutView = Backbone.Marionette.LayoutView.extend({ 
    initialize: function(options){ 
     if(options.layout==='bare'){ 
      this.template = '#bare-layout'; 
     } 
     else{ 
      this.template = '#default-layout'; 
     } 
    } 
}); 

이렇게하면 원하는 레이아웃만큼 템플릿을 사용할 수 있습니다. 이상적으로 나는 LayoutView의 개별 인스턴스를 사용해야한다고 생각하기 시작했습니다.

Answer 2

한 가지 방법은

MainLayoutView = Backbone.Marionette.ItemView.extend({ 
    initialize: function(options){ 
    this.layout = options.layout; 
    }, 

    onRender: function() { 
    if (this.layout == 'default') { // or "fullView" 
     // Render all components 
    } else { 
     ... 
     // Perhaps there's nothing here 
    } 
    // Render the center partial view 
    } 
}); 

또 다른 방법은 뷰 템플릿에 직접 수 ... 같이 할 수있다. Marionette은 템플리트 시스템 (Handlebars, Jade, ...)을 제안합니다.

템플릿 시스템을 사용하지 않는 경우 먼저 템플릿 사용을 고려해야합니다. 둘째, 항상 모든보기를 렌더링하는 것에 대해 생각한 경우 간단하게 $(element).hide() :하지 마십시오. 고급 사용자는 요소를 다시 표시하고 시스템을 악용 할 수 있습니다. 게다가, 이것은 쓸데없는 처리와 쓸모없는 데이터가 전선을 통해 전송 :-)