마리오네트 레이아웃 전략

Question

전환 I 다음과 같은 상황이 :

app.js : 싱글 Marionette.Application() 나는 탐색, 바닥 글 및 메인 영역을 정의합니다. 이니셜 라이저에서 Marionette.Contoller 's를 생성하고 나중에 제어 할 수 있도록이 this.controller 객체에 연결합니다. 나는 모든 컨트롤러를 여기에서 만들지 않을 수도 있습니다. 단지 열심히로드하고 싶은 컨트롤러뿐입니다. 일부는 나중에 Lazy Loaded됩니다. 또한 여기에 Backbone.Router의 인스턴스를, 그리고 내 응용 프로그램 개체에 대한 참조를 전달합니다

var theApp = new TP.Application(); 

theApp.addRegions(
{ 
    navRegion: "#navigation", 
    mainRegion: "#main", 
    footerRegoin: "#footer" 
}); 

theApp.addInitializer(function() 
{ 
    // Set up controllers container and eagerly load all the required Controllers. 
    this.controllers = {}; 

    this.controllers.navigationController = new NavigationController({ app: this }); 
    this.controllers.loginController = new LoginController({ app: this }); 
    this.controllers.calendarController = new CalendarController({ app: this }); 

    this.router = new Router({ app: this }); 
}); 

* * Controller.js :를이보기 & 모델 intsantiation 및 이벤 팅을 처리하는 일반적인 사용 컨트롤러입니다. 각 컨트롤러는 자체 Marionette.Layout을 소유하고있어 App.mainRegion에 채워집니다. 각 컨트롤러는 레이아웃의 "show"이벤트를 바인딩하여 레이아웃의 영역을 사용자 정의보기로 채 웁니다. 각 컨트롤러는 컨트롤러의 관련 레이아웃을 반환하는 getLayout() 인터페이스를 제공합니다.

Marionette.Controller.extend(
{ 
    getLayout: function() { return this.layout; }, 
    initialize: function() 
    { 
     this.views.myView = new MyView(); 
     ... 
     this.layout.on("show", this.show, this); 
     ... 
    }, 
    show: function() 
    { 
     this.layout.myViewRegion.show(myView); 
    } 
}); 

router.js :

... 
routes: 
{ 
    "home": "home", 
    "login": "login", 
    "calendar": "calendar", 
    "": "calendar" 
}, 
home: function() 
{ 
    var lazyloadedController = new LazyLoadController(); 
    this.theApp.mainRegion.show(lazyLoadController.getLayout()); 
}, 
login: function (origin) 
{ 
    this.theApp.mainRegion.show(this.theApp.controllers.loginController.layout); 
} 

그대로, 모든 것이 동일한 레이아웃을 다시로드를 제외하고 잘 작동 : 라우터는 앱의 주요 지역으로 컨트롤러의 레이아웃을로드 앱 싱글 톤을 사용하여/컨트롤러를 두 번. LoginView에 정의 된 DOM 이벤트가 두 번째 프로그램에서 다시 바인딩되지 않습니다. 쉽게 그 컨트롤러의 "쇼"이벤트 핸들러에 LoginView 초기화 코드를 이동하여 해결되는 :

LoginController = Marionette.Controller.extend(
{ 
    ... 
    show: function() 
    { 
     if (this.views.loginView) 
      delete this.views.loginView.close(); 

     this.views.loginView = new LoginView({ model: this.theApp.session }); 
     this.views.loginView.on("login:success", function() 
     { 
     }); 

     this.layout.mainRegion.show(this.views.loginView); 
    } 

이제 모든 것이 잘 작동하지만 그것은 내가 만든 이유의 일부를 실행 취소 컨트롤러의 우선 : 내가 그들을 원하는 보기 및 모델을 소유하고, 한 번만 만들고, 레이아웃을 바꿀 때마다 &을 다시 만들 필요가 없습니다.

내가 누락 된 항목이 있습니까? 레이아웃을 사용하는 방식이 아닌가요? 내가 바꿀 수있는 레이아웃과 지역의 요점이 아닌가 & Views?

분명히 나는 ​​LoginController/Layout으로 자주 돌아 가지 않을 것이지만, HomeController/Layout, CalendarController/Layout, SummaryController/Layout 등과 같은 것들은 ... 단일 페이지 응용 프로그램에서 나는 그 'top - 레벨 '레이아웃을 자주 사용하지 않고 백그라운드에서 캐시 된 상태로 유지하기를 원합니다.

Answer 1

귀하의 문제는 컨트롤러의 단일 인스턴스를 유지 관리하지 않는다고 생각하는 것입니다. (Brian Mann's videos 기준) 라우팅/컨트롤러를 처리하기 위해 권장되는 방법이

App.module('Routes', function (Routes, App, Backbone, Marionette, $, _) { 

    // straight out of the book... 
    var Router = Marionette.AppRouter.extend({ 
     appRoutes: { 
      "home": "home", 
      "login": "login", 
      "calendar": "calendar" 
     } 
    }); 

    var API = { 
     home: function() { 
      App.Controller.go_home(); 
     }, 
     login: function() { 
      App.Controller.go_login(); 
     }, 
     calendar: function() { 
      App.Controller.go_calendar(); 
     } 
    }; 

    App.addInitializer(function (options) { 
     var router = new Router({controller: API}); 
    }); 
}); 

처럼 ... 그리고 컨트롤러 :

App.module("Controller", function (Controller, App, Backbone, Marionette, $, _) { 
    App.Controller = { 
     go_home: function() { 
      var layout = new App.Views.Main(); 
      layout.on('show', function() { 
       // attach views to subregions here... 
       var news = new App.Views.News(); 
       layout.newsRegion.show(news); 
      }); 

      App.mainRegion.show(layout); 
     }, 

     go_login: function() { 
      .... 
     }, 

     go_calendar: function() { 
      .... 
     } 
    }; 
}); 

문제는 게으른로드 컨트롤러 I 의심. ..