木偶布局切换策略

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

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