Jquery 主干木偶区域+；布局+；查看层次结构和响应能力

我正在编写我的第一个

木偶

应用程序，希望使用

木偶

UI结构

我的理解是，粗略地说

• 区域

  与现有的单个DOM节点（如

  div

  或

  span

  ）是1:1，并且可能包含

  视图

  s，包括

  木偶节点提供的特殊节点

• 布局

  是一个

  视图

  以及一个

  区域

  的容器，并指定一个

  模板

  ，通过该模板可以排列这些区域；作为

  视图

  可以将其渲染到

  区域

所以我认为这意味着你必须遵循这种等级制度：

- 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

以自定义外观的页面中，或者我们可能正在将其加载到一个没有节点的页面中。如果导航节点就位，我们不需要渲染它，但我们需要能够维护对它的引用并对其执行操作（“登录”=>“注销”就是一个例子）。另一方面，如果它不在适当的位置，我们需要渲染和维护它

我的问题是：“木偶”是如何处理的？我曾想过一种方法，但我真的希望避免走上任何不必要的痛苦之路

我的解决方案是创建一个绝对

RootRegion

，它是一个在创建时绝对不存在的选择器（默认

body

）

我将有两个

AppLayout

s：一个

InjectedAppLayout

，其中版面只有一个

Content

区域；一个

ManagedAppLayout

，其中版面替换

body

的内容

然后根据

脚本

标记

数据-

参数和/或页面上的内容（使用jQuery），我可以选择使用哪个

布局

在这两种情况下，我都有一个

HeaderRegion

和一个

ContentRegion

。对于

InjectedAppLayout

而言，

HeaderRegion

位于外部，而

ManagedAppLayout

包含这两个区域。然后，我可能需要创建一个单独的

ExternalHeaderRegion

和

InternalHeaderRegion

，或者使用一个条件，因为根据是否由我管理，我需要以非常不同的方式处理事情

这似乎是非常次优的，但我还没有发现人们如何管理它的任何例子

---

最后，对于

InjectedAppLayout

，我担心包含

ContentLayout

的

div

可能非常小，即使屏幕宽度很大，因为我不控制它。我的样式使用

Bootstrap

和媒体查询，都使用

max width

值来确定要设置的样式。我的问题是：

@媒体（最大宽度：XXXpx）

查询是否仍然适用于注入应用程序布局中包含的

div

-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)

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

让我们将这两种材料的响应分开

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

1） 可以在启动时接收一些额外参数

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

MyApp.start(options);

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

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

和

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

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

负责渲染和关闭子视图。在某个子节点中分离父节点

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

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

---

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

感谢您提供了非常详细的答案。一个问题：何时（就事件或应用程序视图生命周期或两者而言）适合在每个区域或布局内呈现初始视图，以及应该对此负责（您在回答中提到您的布局呈现其子视图…这是人们遵循的一般模式吗？）还有一个问题：一般来说，由

id

选择的区域及其直接子对象类似于单例，因此在许多情况下，我希望获得并可能维护对区域、布局或视图的引用。最好的方法是什么？或者我应该尝试驱动路由器控制器事件中的所有内容吗？回答您的第一个问题，这取决于您的初始视图-如果它只是一些静态文本或图片（“等待..我们正在加载”），您可以将其放入html中，当其他视图在该区域中呈现时，它将覆盖此文本。如果初始视图是动态的，则必须为初始状态创建路由，呈现initialView，此initialView将负责呈现ins内容（获取集合和呈现子列表等）。关于布局的使用，我认为是的，作为regionView渲染模板和创建子区域的主要任务。关于第二个问题。应用中的区域非常接近s

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

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