Sencha Touch MVC最佳实践

Question

我试图围绕Sencha Touch的MVC框架,但我找到了几种不同的方法.在这里找到的一种方法是,在SenchaCon 2010上有一种构建Sencha Touch应用程序的方法.它有一个由Sencha Touch员工增加的重量,但它已经有几个月了.在Sencha Touch MVC的其他最近的帖子中,他们有教程(例如这里,以及Manning的MEAP Sencha In Action by Jay Garcia),它们似乎依赖于视图中的Ext.Dispatch来调用特定的控制器方法,传递额外的控制器的元素,使视图控制器感知.

我的问题是,这被认为是构建Sench Touch MVC应用程序的最佳实践？

Answer 1

我有类似的问题.Sencha为您的视图组件实例自动化了大量的getter创建.这很令人困惑.

我采用了Sencha Touch 2.0并将完整的MVC脚手架应用程序作为示例.我的基础是ExtJS 4.0 MVC架构.这将与Sencha Touch 2.0开发人员预览版开箱即用,可为您节省大量时间.

https://github.com/FrancisShanahan/SenchaTouch2MVCHelloworld

为了回答您的具体问题,最新的ExtJS 4.0 MVC架构为控制器的init事件中的视图组件实例设置了侦听器.以下是已经链接的github项目的示例:

Ext.define('HelloWorld.controller.Home', {
    extend: 'Ext.app.Controller',   
    views: ['Home', 'SimpleList'],
    .. etc... 
    init: function() {
        // Start listening for events on views
        this.control({
                 // example of listening to *all* button taps
                 'button': { 'tap': function () {
            console.log('Every button says Hello world');
        } 
    ...

让我知道它是否有帮助,问候,-fs

Answer 2

我建议让你的控制器具有视图感知能力。当控制器收到调度事件时，您应该看到类似于以下内容的内容：

this.controllerViewOne = this.controllerViewOne
                         || this.render({
                                 xtype: 'panel',
                                 listeners: {
                                      onMajorUIAction : function(params){
                                           Ext.Dispatch({ 
                                                controller : 'ProperController',
                                                action     : 'ProperAction',
                                                historyUrl : 'ProperHistoryUrl',
                                                params : params
                                           });
                                      }
                                 }
                            });

这样做的另一个好处是，每个控制器视图的所有“主”侦听器都位于一个空间中。这也意味着为其他控制器重用视图变得更加容易。

您的视图都应该具有侦听器，帮助抽象各个组件及其事件/侦听器的复杂性。

我使用 UI 管理器进行全局 UI 更改，例如隐藏/显示主工具栏或显示后退按钮。