我有一个看起来像这样的用户界面:
+--------+---------------+
| model1 | model details |
| model2 | here, |
| model3 | loaded as the |
| | user selects |
| | a model from |
| | the left. |
| | |
+--------+---------------+
我正在使用MVP模式来驱动这个用户界面。
为了分而治之,我想将Presenter分成两部分:一个处理左侧视图中的用户手势(用户在此视图中更改模型列表,例如排序),另一个Presenter处理右侧视图中的用户手势(用户在此视图中更改单个模型)。
虽然左侧的Presenter与整个模型列表交互,但右侧的Presenter只与一个模型交互:用户从左侧列表中选择的模型。换言之,用户界面是从左到右驱动的。
当用户选择(即点击)左侧的模型后,我的当前实现大致如下:
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();
}
这里是我对 MVP 模式或任何 MVC GUI 模式不太清楚的部分:
- UI 是否可以像这样由多个 Presenter 驱动?
- 多个 Presenter 应该解耦还是可以直接相互通信,就像这里展示的一样?
我的问题归结为:如何最好地向 RightPresenter
指示用户在 LeftPresenter
的视图中选择了一个模型?