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

【问题标题】：JavaScript layout management for MVC/Backbone.js application?MVC/Backbone.js 应用程序的 JavaScript 布局管理？
【发布时间】：2011-09-05 17:09:38
【问题描述】：

我的 Web 应用程序是用 Backbone.js 编写的，有我所说的许多“模式”。每种模式都描述了当前处于活动状态的模型和视图。通过更改哈希 (#) 中的模式参数，我在模式之间切换并实例化必要的 Backbone 模型和视图。

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

假设“PopulationPyramidMode”模式有一个模型和 3 个主干视图。 “HeaderView”应垂直占用 30 个像素。 “SidebarView”应该在水平方向占据 200 像素，“CanvasView”应该填满屏幕，并在调整大小事件时缩放。

更复杂的是，CanvasView 包含一个必须在调整大小时重新渲染的可视化，即必须重新计算 x/y 比例。

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

1) 布局逻辑应该去哪里？
- 在单独的 layoutManager 上 - 在这种情况下如何？
- 每个视图是否应该描述其首选大小等？

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 布局！

【问题讨论】：

标签： javascript model-view-controller layout backbone.js layout-manager

【解决方案1】：

只是在这里大声思考。听起来您可以拥有一个管理布局的视图，但能够根据需要改变布局。问题是：什么触发了布局变化？

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

【讨论】：

【解决方案2】：

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

现在您的所有视图都可以侦听这个公共调度点，如果事件与该视图正在寻找的事件匹配，您可以通过该视图相应地创建相应的环境。这种方法肯定有助于视图的划分，导致更多的模块化和可维护的代码。

【讨论】：