Question

在使用嵌套布局时，我遇到了一些有趣的问题让我们举例说明。 index.html只有一个区域：

...  
<div id="screen" />  
...

现在我有一个在此区域上呈现的登录视图。当我成功登录时，我会显示包含统计信息的主页（在ApplicaitonLayout中）。 ApplicationLayout看起来像这样

<div id="screen">  
  <header />
  <nav id="menu" />
  <section id="content"/>
  <footer />
</div>

我在这里做的是在屏幕区域渲染ApplicationLayout。这里重要的是我希望家庭导航可以路由。我省略了很多JS / Marionette代码，但基本上我有类似的东西（基于Brain Mann风格）

var applicationLayout = ApplicationLayout();

var navigation = {
  goHome: {
     new MenuController({region: applicationRegion.menu});
     new HomeController({region: applicationRegion.content});
  } 

}
app.screen.show(applicaitonLayout);
new HomeRoute(controller: navigation);

所以我在这里做的是我总是需要渲染菜单，即使我不需要它，例如有人点击不同的菜单选项，只有applicationRegion.content应该被重新渲染。更一般地说，当导航改变时如何处理部分静态的区域（总是会显示登录菜单后）？

修改

所以问题是：我是否需要在菜单导航的每个更改中始终显示菜单，即使此菜单已经存在？更具体地说，我们有两种方式可以访问主页：
- 来自浏览器的第一条路线，我们想在其中呈现整个主页（包括菜单）
- 2nd从菜单项导航，在这种情况下，我们不需要渲染菜单，因为它应该已经存在。

Answer 1

为此，请使用应用程序区域：https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.region.md

您的菜单将显示在某个区域中，主要内容（可能包含布局）将位于其他区域。

您可以在此处查看示例（来自我的book on marionette）：https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/app.js#L3

这里有一个实例：http://davidsulc.github.io/marionette-gentle-introduction/#contacts

根据评论进行编辑：

如果您的布局已经渲染（因此菜单可见），您只需在单击菜单项时更改布局的子视图：myLayout.show(newView)。

可以通过reqres处理通信，例如参见https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/header/list/list_controller.js#L11（事件触发器）和https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/contacts_app.js#L27（事件处理程序）

Backbone.Marionette布局和导航

1 个答案: