Question

我有一个工作的Marionette应用程序，它使用模块和RequireJS模块，主要基于David Sulc的书。

当服务器提供index.html（包括一些基本区域（menuRegion和mainRegion））时，我的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

如果不使用任何高级模式或外部库，您将如何处理？

Answer 1

如果我理解正确的问题，那么您正在询问与更改＆＃34;页面相关的策略＆＃34;你的应用程序？

我认为一般的方法是在app对象中实例化一个布局视图，它代表＆＃34; page＆＃34;的容器。该布局视图可以有一个名为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）也可以是布局视图，其中可能包含侧边栏，标题或任何您想要的区域。

根据路线更改布局

1 个答案: