根据路线更改布局

Changing layouts depending on routes

本文关键字：布局      更新时间：2023-09-26

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

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

即 

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

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

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

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

这就是我尝试完成此操作失败的方式，但是任何对我当前代码工作的想法将不胜感激：

  1. 我将 index.html/app.js 中声明的区域移动到新布局中，并为其保留唯一的内容区域。LandingApp，当"/"没有问题时在此处显示其内容。
  2. 我不再将菜单应用程序与应用程序启动一起加载。
  3. 我创建了一个新的 MainApp 模块，它的想法是新的额外层。此模块实例化布局视图，并在触发事件时将其添加到内容区域。
我

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

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

如何在不使用任何高级模式或外部库的情况下解决这个问题？

如果我

理解正确，您是在询问与更改应用程序"页面"有关的策略吗？

我相信一般方法是在应用程序对象中实例化一个布局视图，该视图表示"页面"的容器。该布局视图可以具有一个名为 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）也可以是一个布局视图，可能包含侧边栏的区域，标题或任何您想要的内容。

相关文章：