Javascript 木偶布局切换策略

我有以下情况：

app.js:Singleton-marionete.Application（），其中我定义了导航、页脚和主区域。在初始值设定项中，我构造了Marionette.Contoller，并将其附加到应用程序的this.controller对象，以供以后控制。我可能不会在这里构建所有的控制器，只构建我想要加载的控制器。有些是延迟加载的。我还在此处实例化一个主干.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:这是一个通用控制器，用于处理视图和模型的插入和事件。每个控制器都有自己的木偶布局，将填充到App.main区域。每个控制器都绑定到布局的“显示”事件，以使用自定义视图填充布局的区域。每个控制器都提供一个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初始化代码移动到该控制器的“show”事件处理程序中，可以轻松解决此问题：

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

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

现在一切都很好，但它取消了我创建控制器的部分原因：我希望他们拥有一个视图及其模型，创建一次，而不必每次切换布局时都销毁和重新创建它们

我错过什么了吗？这不是我应该如何使用布局吗？布局和区域的全部要点不是我可以随意切换视图吗

---

显然，我不会经常跳回LoginController/Layout，但是在HomeController/Layout、CalendarController/Layout、SummaryController/Layout等之间呢。。。在单页应用程序中，我可能会经常在这些“顶级”布局之间切换，我希望视图保持在后台缓存。

我认为您的问题在于没有维护控制器的单个实例。处理路由/控制器（基于）的建议方法如下

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

。。。以及控制器：

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

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

我怀疑你的问题是延迟加载的控制器