Question

我正在撰写我的第一个Marionette应用，并希望使用Marionette用户界面结构。

我的理解是，粗略地说，

Region为1：1，其中现有，单个DOM节点（如div或span）并且可能包含View } s，包括Marionette
Layout是View以及Region的容器，并指定template这些区域的排列方式;作为View，它可以呈现为Region

所以我认为这意味着你必须遵循这种层次结构：

- Root (region) [could be more than one]
-- Layout A
--- Inner Region A1
--- Inner Region A2
-- Layout B
--- Inner Region B1
--- Inner Region B2
-- View C
--- maybe some subviews?

如果我的假设有误，请更正。

在任何情况下，我的应用程序在UI中都有一个导航和内容区域。现在，当加载脚本时，我们可能会将其加载到已经有div#region-navigation的页面中以自定义外观，或者我们可能将其加载到没有节点的页面中。如果导航节点到位，我们不需要渲染它，但我们需要能够维护对它的引用并对其执行操作（例如，“登录”=＆gt;“注销”）。另一方面，如果它不到位，我们需要渲染和维护它。

我的问题是：处理此问题的“木偶”方式是什么？我想过一种方法，但我真的想避免任何不必要的痛苦路径。

我的解决方案是创建一个绝对RootRegion，它是一个单一的选择器（默认body），在创建时肯定不存在。

我会有两个AppLayout：InjectedAppLayout，其中布局只有Content区域和ManagedAppLayout，其中布局替换body的内容{1}}。

然后根据script代码data-参数和/或页面上的内容（使用jQuery），我可以选择使用哪个Layout。

在任何一种情况下，我都有HeaderRegion和ContentRegion。如果InjectedAppLayout HeaderRegion生活在外面而ManagedAppLayout包含两者。然后，我可能需要单独ExternalHeaderRegion和InternalHeaderRegion或使用条件，因为我需要根据是否由我管理来处理不同的事情。

这似乎非常不理想，但我没有找到人们如何管理这个的例子。

最后，在InjectedAppLayout的情况下，我担心包含div的{{1}}可能非常小，即使屏幕宽度很大，因为我无法控制它。我的样式使用ContentLayout和媒体查询，都使用Bootstrap值来确定要设置的样式。我的问题是：在注入应用布局的情况下，max-width查询是否仍然适用于包含@media (max-width: XXXpx)的内容？

Answer 1

我使用了以下结构

-Marionette Application (root - have regions hash of existing node elements)
-- LayoutView (breaks application region in sub regions if needed)

---CollectionView || CompositeView (render collections)
----ItemView
||
---LayoutView (create more sub-regions) 
---- (other sub views)
||
---ItemView (render model)

+应用程序状态的路由器和控制器维护

让这些东西之间单独回应

Application - 首先开始。负责保持常量和全局参数，启动和停止子模块加载默认路由器和控制器+提供请求/响应通道。

1）开始时可以收到一些额外的参数

var options = {
  something: "some value",
  another: "#some-selector"
};

MyApp.start(options);

2）区域必须与现有节点（导航，内容，页脚，侧边栏等）一起使用

MyApp.addRegions({
  someRegion: "#some-div",
  anotherRegion: "#another-div"
});

因此，您可以为JS提供一些参数来呈现正确的视图+您可以使用节点元素连接您的应用程序

Router 和 Controller

帮助您根据应用程序状态呈现正确的视图。负责根据网址保持应用程序视图正确并提供导航您可以将其与链接一起使用+使用导航方法

手动导航

var MyRouter = new Marionette.AppRouter({
  controller: myController,
  appRoutes: {
    "foo": "doFoo",
    "bar/:id": "doBar"
  }
});

<强> LayoutView 负责渲染和关闭子视图。某个孩子中的单独父节点

Backbone.Marionette.LayoutView.extend({
  template: "#layout-view-template",

  regions: {
    menu: "#menu",
    content: "#content"
  }
});

使用这种结构，您可以向应用程序传递一些参数，让应用程序知道用户是否进入。根据这一点，您可以使用 addRegions 添加区域并渲染一些布局（例如＆＃39; UserNav＆＃39;或者＃39; GuestNav＆＃39;）。布局将呈现其子视图，如UserLinks，UserAvatar等。然后用户单击链接路由器和控制器处理这个并告诉应用程序在某些区域中呈现什么。

Backbone Marionette Region + Layout +查看层次结构和响应性

1 个答案: