Backbone.js 如何使用木偶创建多个布局？

我的主干木偶和requireJS应用程序在不同的文件夹中结构化：集合、控制器、配置、初始化、模型、路由器、服务、模板和视图

AppInit文件中定义了一个名为mainRegion的区域。 我应该如何更改我在主要地区使用的视图

一个选项是使用木偶布局在主区域中具有两个区域（如标题和内容）的布局

我应该在哪里创建布局？

---

在“视图”文件夹或“控制器”文件夹或其他任何东西中？

您关于创建布局的建议完全有效

这是另一个选择。木偶应用程序很像一个布局 因此，您可以这样定义您的应用程序：

App.addRegions({
  header: "#header",
  main: "#main"
});

app                 -> Marionette.Application
  header              -> Marionette.Region
  main                -> Marionette.Region
    mainLayout          -> Marionette.Layout
      sidebar             -> Marionette.Region
      content             -> Marionette.Region
      footer              -> Marionette.Region

app                 -> Marionette.Application
  header              -> Marionette.Region
    headerContent       -> YourHeaderViewClass
  main                -> Marionette.Region
    mainLayout          -> Marionette.Layout
      sidebar             -> Marionette.Region
        sidebarContent      -> YourSidebarView
      content             -> Marionette.Region
        appContent          -> YourAppContentView
      footer              -> Marionette.Region
        footerContent       -> YourFooterView

如果

main

非常复杂，则它也可以是带有嵌套区域的布局。例如 如果您有侧边栏、内容和页脚，可以按如下方式排列：

App.addRegions({
  header: "#header",
  main: "#main"
});

app                 -> Marionette.Application
  header              -> Marionette.Region
  main                -> Marionette.Region
    mainLayout          -> Marionette.Layout
      sidebar             -> Marionette.Region
      content             -> Marionette.Region
      footer              -> Marionette.Region

app                 -> Marionette.Application
  header              -> Marionette.Region
    headerContent       -> YourHeaderViewClass
  main                -> Marionette.Region
    mainLayout          -> Marionette.Layout
      sidebar             -> Marionette.Region
        sidebarContent      -> YourSidebarView
      content             -> Marionette.Region
        appContent          -> YourAppContentView
      footer              -> Marionette.Region
        footerContent       -> YourFooterView

在显示您的视图后，它将如下所示：

App.addRegions({
  header: "#header",
  main: "#main"
});

app                 -> Marionette.Application
  header              -> Marionette.Region
  main                -> Marionette.Region
    mainLayout          -> Marionette.Layout
      sidebar             -> Marionette.Region
      content             -> Marionette.Region
      footer              -> Marionette.Region

app                 -> Marionette.Application
  header              -> Marionette.Region
    headerContent       -> YourHeaderViewClass
  main                -> Marionette.Region
    mainLayout          -> Marionette.Layout
      sidebar             -> Marionette.Region
        sidebarContent      -> YourSidebarView
      content             -> Marionette.Region
        appContent          -> YourAppContentView
      footer              -> Marionette.Region
        footerContent       -> YourFooterView

---

关于组织，布局是一种视图，所以我有时会将它们放在我的

views

文件夹中

但是，如果我最终得到了许多布局，我将在旁边创建另一个文件夹

视图

调用

布局

并分别组织它们

...
views/
  viewA.js
  viewB.js
layouts/
  mainLayout.js
  otherLayout.js
...

---

我的回答有帮助吗？