根据路线更改布局答案

【问题标题】：Changing layouts depending on routes根据路线更改布局
【发布时间】：2015-01-28 18:34:26
【问题描述】：

我有一个使用模块和 RequireJS 模块的木偶应用程序，主要基于 David Sulc 的书。

当服务器为包含一些基本区域（menuRegion 和 mainRegion）的 index.html 提供服务时，我的 app.js 将启动 Marionette 应用程序。该应用程序会自动为菜单加载 MenuApp 模块，并根据路线为主要内容（即 KanbanApp）加载某个模块。因此，我要求在启动应用程序之前完全加载所有定义路由的模块。

即

require(["apps/home/home_app", "apps/kanban/kanban_app"], function(){
    Backbone.history.start();
});

此时，应用始终使用 index.html/app.js 中定义的区域。

现在，我意识到我需要一个登录页面（登录表单等）以包含在具有不同布局的应用程序中。我尝试了不同的方法，但我总是走入死胡同。您会尝试遵循哪些步骤？

我的主要想法是根据路线加载“AppLayout”或“LandingLayout”。但是，路由是在子模块中定义的，而我没有主路由器这一事实使这变得复杂。此外，我不确定这个逻辑的代码会去哪里，也许是 app.js 和每个子模块 .js 之间的一个新的额外层？我不确定这是否是最好的解决方案，因为事情变得过于复杂。例如：现在当 /route-from-the-real-app 被调用时，一个子模块路由会捕获它并执行控制器。到目前为止，控制器基本上填充了 mainRegion。但是现在，控制器还需要调用这个额外的层来显示 AppLayout，另外还要触发一个事件，让 MenuApp 在 menuRegion 中显示。这不应该是最初的 KanbanApp 任务。

这就是我未能成功地尝试完成此操作的方式，但我将不胜感激任何对我当前代码起作用的想法：

我将 index.html/app.js 中声明的区域移动到新布局中，并为其保留一个唯一的内容区域。 LandingApp，在此处显示其内容时“/”没有问题。
我不再将 MenuApp 与应用启动一起加载。
我创建了一个新的 MainApp 模块，并认为它是新的额外层。此模块实例化 LayoutView 并在触发事件时将其添加到内容区域。

我不确定应该如何/何时加载 MenuApp 和 MainApp。由于它们没有定义的路由，我不需要它们与应用程序一起启动，但我需要它们来注册事件处理程序。

您可以在此处应用任何更改之前查看应用程序的完整代码（非常简单）：https://github.com/mezod/multikanban

如果不使用任何高级模式或外部库，您将如何解决这个问题？

【问题讨论】：

标签： javascript backbone.js requirejs marionette

【解决方案1】：

如果我理解正确的问题，您是在询问与更改应用“页面”有关的策略吗？

我相信一般的方法是在代表“页面”容器的应用程序对象中实例化一个布局视图。该布局视图可能有一个名为page 的区域。然后，您可以通过该区域轻松切换视图。例如：

var App = Marionette.Application.extend({

    changePage : function(view) {
        this.rootView.page.show(view);
    },

    onStart : function() {

        this.rootView = Marionette.LayoutView.extend({
            el: 'body',
            regions: {
            'page' : '.page-container' // some div on the page <div class="page-container"></div>
            }
        });

    });
});

然后要更改页面（无论是在路由方法中还是在应用程序中的其他位置），您只需转到App.changePage(myNewPageView)。另一个页面 (myNewPageView) 也可以是一个布局视图，其中可能包含一个用于侧边栏、标题或任何您想要的区域的区域。

【讨论】：