问题描述
|
我用Backbone.js编写的Web应用程序具有我所说的多个“模式”。
每种模式都描述了当前处于活动状态的模型和视图。通过更改哈希（＃）中的mode参数，我可以在模式之间切换并实例化必要的Backbone模型和视图。
描述首选布局并在模式级别注入容器HTML代码似乎合乎逻辑。
假设模式“ PopulationPyramidMode \”具有一个模型和3个Backbone视图。 \“ 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>
解决方法
只是在这里大声思考。听起来您可以拥有一个可以管理布局的视图，但是能够根据需要对布局进行变形。问题是：什么触发布局更改？
您可能拥有一个控制器，该控制器配备了这些不同模式的路线和动作。该控制器可以将一个实例保存到此布局视图，然后调用参数化的刷新功能。或者，控制器可以通过模式更改触发事件，并且可以将视图设置为侦听该事件。一旦接收到，该视图将调用其刷新功能。
, 我对构建此类应用程序的看法是使用简单的观察者模式。
设计您的控制器的方式是，只要＃标签发生变化，它就可以简单地调度特定事件。在控制器中有一个事件映射，它充当要调度的事件和url之间的参考表，更好的是，您可以遵循有关哈希部分选择的特定约定，例如。每次用户导航到mydomain.com/#part1/part2 URL时，控制器都会调度事件''evt_part1_part2 \'。您可以使用公共调度点（可以是dom元素，也可以是专门用于此目的的javascript对象）。
现在，所有视图都可以侦听此公共调度点，并且如果事件与该视图正在寻找的事件匹配，则可以通过该视图相应地创建相应的环境。
这种方法无疑有助于视图的划分，从而导致更多模块化和可维护的代码。