MVC/Backbone.js应用程序的JavaScript布局管理？

我的web应用程序是用Backbone.js编写的，它有许多我称之为“模式”。 每个模式描述当前处于活动状态的模型和视图。通过更改hash（#）中的mode参数，我可以在模式之间切换，并实例化必要的主干模型和视图

在模式级别上描述首选布局并注入容器html代码似乎是合乎逻辑的

假设模式“PopulationPyramidMode”有一个模型和3个主干视图。“HeaderView”垂直方向应占30像素。“侧边栏视图”在水平方向上应占200像素，“画布视图”应填充屏幕的所有部分，并在调整事件大小时缩放

为了使事情进一步复杂化，CanvasView包含一个可视化，必须在调整大小时重新渲染，即必须重新计算x/y比例

那么，最好的解决方法是什么？

1） 布局逻辑应该放在哪里？
-在一个单独的布局管理器上-在这种情况下如何进行？
-每个视图是否应描述其首选大小等

2） 如何为布局注入必要的HTML/CSS并在它们之间切换

<!-- Layout 1 -->
<div id="header"></div>
<div id="sidebar"></div>
<div id="canvas"></div>

<!-- Layout 2 -->
<div id="header"></div>
<div id="canvas"></div>

---

感谢您提供的任何具体提示，以及关于JavaScript总体布局的提示

在这里大声思考。听起来您可以有一个视图来管理布局，但可以根据需要修改布局。问题是：是什么触发了布局更改

---

您可能有一个控制器，它配备了这些不同模式的路由和操作。此控制器可以持有此布局视图的实例并调用参数化刷新函数。或者，控制器可以通过模式更改触发事件，并且可以设置视图以侦听事件。一旦收到，视图将调用其刷新功能

在这里大声思考。听起来您可以有一个视图来管理布局，但可以根据需要修改布局。问题是：是什么触发了布局更改

---

您可能有一个控制器，它配备了这些不同模式的路由和操作。此控制器可以持有此布局视图的实例并调用参数化刷新函数。或者，控制器可以通过模式更改触发事件，并且可以设置视图以侦听事件。一旦收到，视图将调用其刷新功能

关于构建这样的应用程序，我的观点是使用直截了当的观察者模式。 设计控制器时，它只需在标签更改时发送特定事件。在控制器中有一个事件映射，它充当要调度的事件和url之间的引用表，更好的是，您可以遵循有关哈希部分选择的特定约定，例如，每次用户导航到url mydomain.com/#part1/part2时，控制器都会调度一个事件“evt_part1_part2”。您可以使用公共分派点（可以是dom元素，也可以是专门用于此目的的javascript对象）

现在，您的所有视图都可以侦听这个公共分派点，如果事件与此视图正在查找的事件匹配，则可以通过该视图相应地创建相应的环境。

---

这种方法无疑有助于视图的划分，带来更多模块化和可维护的代码。

我对构建此类应用程序的看法是使用直观的观察者模式。 设计控制器时，它只需在标签更改时发送特定事件。在控制器中有一个事件映射，它充当要调度的事件和url之间的引用表，更好的是，您可以遵循有关哈希部分选择的特定约定，例如，每次用户导航到url mydomain.com/#part1/part2时，控制器都会调度一个事件“evt_part1_part2”。您可以使用公共分派点（可以是dom元素，也可以是专门用于此目的的javascript对象）

现在，您的所有视图都可以侦听这个公共分派点，如果事件与此视图正在查找的事件匹配，则可以通过该视图相应地创建相应的环境。 这种方法无疑有助于视图的划分，从而产生更多模块化和可维护的代码