我有以下情况:

app.js: Singleton Marionette.Application() 我在其中定义导航、页脚和主要区域。在初始化程序中，我构建了 Marionette.Contoller's 并将它们附加到应用程序的 this.controller 对象以供以后控制。我可能不会在这里构建所有的 Controller ，只构建我想要预先加载的 Controller 。有些是后来的延迟加载。我还在这里实例化了一个 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:这是一个通用的 Controller ，用于处理 View 和模型的插入和事件处理。每个 Controller 都有自己的 Marionette.Layout，要填充到 App.mainRegion 中。每个 Controller 绑定(bind)到布局的“显示”事件以使用自定义 View 填充布局区域。每个 Controller 都提供一个 getLayout() 接口(interface)，该接口(interface)返回 Controller 的关联布局。

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:路由器使用应用程序单例将 Controller 的布局加载到应用程序的主要区域:

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

事实上，除了重新加载相同的布局/ Controller 两次外，一切正常。发生的情况是 LoginView 中定义的 DOM 事件不会在第二次显示时重新绑定(bind)。通过将 LoginView 初始化代码移动到该 Controller 的“显示”事件处理程序中可以轻松解决这个问题:

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 及其模型，创建一次，而不必在每次切换布局时销毁和重新创建它们.

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

显然我不会经常跳回 LoginController/Layout，但是在 HomeController/Layout、CalendarController/Layout、SummaryController/Layout 等之间呢……在单页应用程序中我可能会在这些“top-”之间切换level' 布局相当频繁，我希望 View 在后台缓存。

最佳答案

我认为您的问题是您没有维护 Controller 的单个实例。推荐的处理路由/ Controller 的方式(基于 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});
    });
});

...和 Controller :

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

我怀疑您的问题是延迟加载的 Controller ...

关于javascript - Marionette Layout 切换策略，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14679588/