kukla Düzen stratejisi

Question

anahtarlama Aşağıdaki durum vardır:

app.js: Singleton Marionette.Application() Bir nav, altbilgi, ve bir ana bölgeyi tanımlar. Başlatıcıda Marionette.Contoller's'ı yapıyorum ve bunları daha sonra kontrol etmek için uygulamanın this.controller nesnesine iliştiriyorum. Kontrolörün tamamını burada yapmayacağım, sadece İstekli Yüksekten İstiyorum. Bazıları daha sonra Lazy Loaded. Ben de burada bir Backbone.Router örneğini ve benim app nesneye bir referans geçmesine:

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: bu görünüm & modeli intsantiation ve Eventing kolları genel kullanım denetleyicisi olduğunu. Her bir Denetleyici, App.mainRegion'a doldurulmak üzere kendi Kuzgunluğuna sahiptir. Her bir Denetleyici, düzenin bölgelerini özel görünümlerle doldurmak için düzenin "show" olayına bağlanır. Her bir Denetleyici, denetleyicinin ilişkili düzenini döndüren bir getLayout() arabirimi sunar.

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); 
} 

Olduğu gibi, her şey aynı düzeni yeniden dışında çalışıyor: yönlendirici App ana bölgeye bir Denetçi'nin düzenini yüklemek için uygulama singleton kullanır/kontrolör iki kez. Olan şey, LoginView'de tanımlanan DOM olaylarının ikinci gösterime yeniden bağlanmamasıdır. kolayca Controller için "gösteri" olay işleyicisi içine LoginView başlatma kodu hareket çözüldü Hangi:

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); 
    } 

Şimdi her şey iyi çalışır, ancak benim yarattığım sebeplerinin bir kısmını geri alır Kontrolör en başlamak için: onları istiyorum Bir Görünüm ve Modellerine sahip olmak için bunları bir kez oluşturun ve düzenlerimi her değiştirdiğimde &'u yeniden oluşturmanız gerekmez.

Bir şey mi eksik? Layouts'u böyle kullanmam mı gerekiyor? Görünümler, & Görünümlerini dışarıda değiştirebildiğim Layouts ve Bölgeler noktasının tamamı değil mi?

Açıkçası, ben genellikle LoginController/Layout'a geri zıplayamazdım, ama bir HomeController/Layout, CalendarController/Layout, SummaryController/Layout, vs ... arasında tek bir sayfa uygulamasında olanlar arasında geçiş yapabilirim. -Çok sıklıkta düzenler ve manzaranın arka planda önbelleklenmesini istiyorum.

Answer 1

Sorununuzun, denetleyicinin tek bir örneğini korumanız olmaması olduğunu düşünüyorum. (Brian Mann's videos dayanarak) yönlendirme/denetleyicileri işlemek için önerilen yol bu

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}); 
    }); 
}); 

gibidir ... ve denetleyici:

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() { 
      .... 
     } 
    }; 
}); 

Sorununuz tembel yüklü denetleyici olduğunu ben şüpheli. ..