木偶布局切换策略

Question

我有以下情况：

app.js： Singleton Marionette.Application（），我定义了一个导航，一个页脚和一个主要区域。 在初始化程序中，我构造了Marionette.Contoller并将它们附加到应用程序的this.controller对象以供以后控制。 我可能不会在这里构建所有的控制器，只是那些我想要急切加载的控制器。 有些人稍后会加入Lazy。 我还在这里实例化一个Backbone.Router，并传入对我的app对象的引用：

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：这是一个通用控制器，用于处理视图和模型的实例化和事件。 每个Controller都拥有自己的Marionette.Layout，填入App.mainRegion。 每个Controller绑定到布局的“show”事件，以使用自定义视图填充布局的区域。 每个Controller都提供一个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：路由器使用app singleton将Controller的布局加载到App的主要区域：

...
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事件不会在第二个show上重新绑定。 通过将LoginView初始化代码移动到该Controller的“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);
    }

现在一切正常，但它解决了我创建Controller的部分原因：我希望它们拥有一个View及其模型，创建它们一次，而不必在每次切换布局时销毁和重新创建它们。

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

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

Answer 1

我认为您的问题是您没有维护控制器的单个实例。 处理路由/控制器的推荐方法（基于Brian Mann的视频 ）是这样的

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

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