Question

我正在研究ExtJs并试图找到组织我未来项目的最佳方法。我开始使用ExtJs MVC教程http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture

在这个架构中有一些我不喜欢的东西： Controller“知道”视图小部件并以这种方式添加事件监听器

this.control({
            'viewport > userlist':{
                itemdblclick:this.editUser
            },
            'useredit button[action=save]':{
                click:this.updateUser
            }
        });

我们正在开展一个包含500多种表格的大型项目。我相信在如此大的项目中这种方法会造成很大的混乱。有没有办法解耦控制器和视图？

例如，在GWT中，他们使用MVP模式，其中Presenter不了解视图的内部并通过“显示”界面与视图进行交互。我知道，Javascript没有接口，但可能有一些方法可以在Extjs中模拟它们。

我希望我的控制器是这样的：

editButton = viewInterface.getEditButton();
editButton.on('click', function(btn, e, eOpts) {
    eventBus.fireEvent(editUserEvent);
});

有可能吗？

Answer 1

绝对可能。在视图中创建方法getEditButton并返回您想要的任何内容。这不是问题。

我的2c然而用于解耦视图和控制器。我目前也在做一个相当大的项目。可能不像你那么大，但我们会有大约100多个观点/控制器。

我尝试使用两个主要的经验法则来构建这个项目：

如果我有一些共同的逻辑，无论是在视图中还是在控制器中 - 我创建基类并在那里移动这个逻辑。所以稍后 - 我只是扩展它，以便子视图/控制器获得相同的功能。
我在视图类中留下与应用程序的业务逻辑无关的代码 - 例如，如果我有一个网格，需要添加特殊代码来选择网格中的所有记录，或者显示记录数量和状态栏内网格中选定记录的数量 - 此代码转到视图类。因此，控制器不了解这些“简单”任务，只关注应用程序的业务逻辑。

Answer 2

视图中的逻辑确实违背了MVP模式的目的。我建议检查deftjs，因为它使组件查询更清晰。由于大多数用户操作都在控件（如按钮）上，因此我会给他们一个操作并查找该独特操作，例如登录。

 control: {
    submitButton: {
        selector: 'button[action=login]',
        listeners: {'click': 'login'}
    }
 }

上面的问题是它仍然将控制器绑定到视图组件，即按钮，因为它引用了它的类型。你可以用id替换它，但我也不喜欢它。我相信获得此功能的最佳方式是让deftjs有一个更通用的事件模型，他们可能已经在路线图上，因为它们基于RobotLegs等项目。如果没有人能尽快提供这项功能，我可能会对它进行一次尝试。

最后但并非最不重要的是，如果您发现需要向组件添加逻辑，则最好扩展该组件并将其与视图分开进行测试。

Answer 3

我宁愿让这些视图使用fireEvent来激活像'edit'这样的有意义的事件。

控制器将知道视图并可以监视视图上的“编辑”事件。

查看：

this.on(this.btnEdit, 'click', function(){ this.fireEvent('edit');},this);

<强>控制器：

this.mon(this.viewInstance, 'edit', this.doEdit, this);

这种方式控制器不知道视图内部。

在ExtJs中解耦控制器和视图

3 个答案: