Cre*_*esh 5 model-view-controller mvp mvvm
我有一个如下所示的用户界面:
+--------+---------------+
| model1 | model details |
| model2 | here, |
| model3 | loaded as the |
| | user selects |
| | a model from |
| | the left. |
| | |
+--------+---------------+
Run Code Online (Sandbox Code Playgroud)
我正在使用MVP 模式来驱动这个用户界面。
我在这里简化了很多,但为了分而治之,我想将 Presenter 分成两个:一个处理左侧视图中的用户手势(用户更改此视图中的模型列表,例如排序)另一个 Presenter 处理右侧视图中的用户手势(用户更改此视图中的单个模型)。
左侧的演示器与整个模型列表交互,而右侧的演示器仅与单个模型交互:用户从左侧列表中选择的模型。IOW ui 是从左到右驱动的。
用户选择(即单击)左侧的模型后,我当前的实现如下所示(大致):
LeftPresenter.onModelClick = function(event) {
var model = this.getModelFromEvent(event);
this.view.setSelectedModel(model); // updates list widget on left
RightPresenter.setSelectedModel(model); // notify the other Presenter
}
RightPresenter.setSelectedModel = function(model) {
// lazy load the model from the db, and update the
// view when the model fires the "loadComplete" event
model.bind('loadComplete', this.view.setModel);
model.lazyLoad();
}
Run Code Online (Sandbox Code Playgroud)
以下是我对 MVP 模式或任何 MVC GUI 模式感到模糊的部分:
所以我的问题归结为:表明用户在视图中选择模型的最佳方式是什么RightPresenterLeftPresenter?
1. 一个ui可以像这样由多个Presenter驱动吗?
是的
2. 多个 Presenter 应该解耦还是可以直接相互通信(如图所示)?
我处理它的方式是我有一个看起来像这样的框架
当事件发生时,UI_Object 处理该事件,创建并触发 Command 对象。每个 UI_Object 都实现 UI_Views 中的视图接口,并将其自身注册到 UI_View。命令对象可以通过接口访问UI_View中注册的UI对象。
例如,在我的一个金属切割应用程序中,有一个称为 HOLD 的屏幕元素,其中包含尚未放置在金属板上进行切割的所有零件。零件可以通过多种方式进入货舱。从零件文件加载、由形状编辑器创建、由我们的 CAD 屏幕创建或从金属板上拾取。
这些操作中的每一个都被封装到实现命令设计模式的单独命令对象中。当命令对象执行时,它会调用。
CuttingScreen.Refresh
CADScreen.Refresh
ShapeEditor.Refresh
Run Code Online (Sandbox Code Playgroud)
其中每一个都会刷新相应的屏幕来更新保留。
现在我可以向我的应用程序界面添加一个方法。MyCuttingApplication.HoldRefresh 将依次调用所有三个刷新。
但重要的一点是你的视图调用一个使用视图实现的接口的命令来更新。视图对象将自身注册到较低层。