jQuery MiniUI,快速开发WebUI界面

在Ext JS应用程序中构建可维护的控制器


你好,“You Had Me”

在线查看代码

创建的视图将允许当前用户去查看和更新他们的爱好,该视图将使用build方法,因此后续工作会很简单。
app/view/Hobby.js

Ext.define('Example.view.Hobby', {
    extend: 'Ext.form.Panel',
    alias: 'widget.hobbyview',
    initComponent: function () {
        var me = this;

        me.items = me.buildItems();

        me.callParent(arguments);
    },
    buildItems: function () {
        return [
            {
                xtype: 'textfield',
                name: 'FavoriteHobby'
            },
            {
                xtype: 'button',
                itemId: 'save',
                text: 'Save'
            },
            {
                xtype: 'component',
                itemId: 'hobbyTpl',
                tpl: '{Name}\'s favorite hobby is {FavoriteHobby}'
            }
        ];
    }
});

下面,将创建控制器来管理视图:
app/controller/Hobby.js

Ext.define('Example.controller.Hobby', {
    extend: 'Ext.app.Controller',
    init: function () {
        this.control({
            'hobbyview button#save': {
                click: this.onSaveButtonClick
            }
        });
    },
    onSaveButtonClick: function (button) {
        var form = button.up('form'),
            values = form.getValues(),
            user;

        // We will assume the application provides a way to get the currently logged-in user.
        user = this.getApplication().getCurrentUser();

        user.set(values);
        user.save();

        form.down('#hobbyTpl').update({
            Name: user.get('Name'),
            FavoriteHobby: values.FavoriteHobby
        });
    }
});

尽管是一个非常简单的控制器,但它知道视图对它有意见。

控制器要知道:

视图有一个ItemId为save的按钮
按钮是表单的一个子组件
如何从视图的表单中获得值
表单有一个itemId为hobbyTpl的子组件,如何去更新它?
表单不知道用户这个概念

控制器的一切完全依赖于视图的保存按钮和视图自身的结构,这将导致控制器和视图必须紧密耦合,譬如,如果保存按钮在表单组件的之外,控制器就不得不重写。另外,如果itemId为hobbyTpl的组件被改变,控制器也需要进行相应的更改。视图中的任何微小变化都可能会令控制器出现问题。

你是Tearing Me Apart


在线查看代码

现在,你可以已经意识到控制器的一些问题了,下面就来解决这些问题。首先是要让视图与用户关联。
app/view/Hobby.js

Ext.define('Example.view.Hobby', {
    // ...

    bindUser: function (record) {
        this.userRecord = record;
    },
    getUser: function () {
        return this.userRecord;
    }
    // ...
});

通过设置一些方法来关联用户,这样就可以很容易的调整视图方法而不需要修改控制器。通过这些附加项,就可以通过传递一个实例或稍后调用bindUser方法后让视图关注用户记录。这样,还可以获取绑定的用户,而控制器则无须了解太多。

接下来,要让控制器允许视图去管理用户记录并更新数据。

app/controller/Hobby.js

Ext.define('Example.controller.Hobby', {
    // ...
    onSaveButtonClick: function (button) {
        var form = button.up('form'),
            values = form.getValues(),
            user = form.getUser();

        user.set(values);
        user.save();

        form.down('#hobbyTpl').update({
            Name: user.get('Name'),
            FavoriteHobby: values.FavoriteHobby
        });
    }
});

很不错了,不过清单里还有一件事没做,那就是控制器还是要了解视图的结构,现在要做的就是让它更灵活。

下面更新一下清单:

控制器知道以下内容

  • 视图有一个ItemId为save的按钮
  • 按钮是表单的一个子组件
  • 如何从视图的表单中获得值
  • 表单有一个itemId为hobbyTpl的子组件,如何去更新它?
  • 表单不知道用户这个概念

模板?We Don’t Need [to be aware of] No Stinkin的模板

在线查看代码

视图一直很想知道为什么控制器不能专注于自己的商业逻辑,而这可通过移除模板的相关内容来让它少管点闲事。

视图希望它的模板在保存按钮被单击时被更新,为了实现这个目标,需要添加事件处理。
app/view/Hobby.js

Ext.define('Example.view.Hobby', {
    // ...
    onSaveClick: function () {
        var me = this,
            values = me.getValues(),
            user = me.getUser();

        me.down('#hobbyTpl').update({
            Name: user.get('Name'),
            FavoriteHobby: values.FavoriteHobby
        });
    },
    buildItems: function () {
        var me = this;

        return [
            {
                xtype: 'textfield',
                name: 'FavoriteHobby'
            },
            {
                xtype: 'button',
                itemId: 'save',
                text: 'Save',
                listeners: {
                    click: me.onSaveClick,
                    scope: me
                }
            },
            {
                xtype: 'component',
                itemId: 'hobbyTpl',
                tpl: '{Name}\'s favorite hobby is {FavoriteHobby}'
            }
        ];
    }
});

现在,视图将处理更多的视图事务,而控制器也可以更简单了。

app/controller/Hobby.js

Ext.define('Example.controller.Hobby', {
    // ...
    onSaveButtonClick: function (button) {
        var form = button.up('form'),
            values = form.getValues(),
            user = form.getUser();

        user.set(values);
        user.save();
    }
});

不幸的是,控制器还是能看到不少的视图组件,不过至少列表中的事情又少了一件:

控制器知道以下内容

  • 视图有一个ItemId为save的按钮
  • 按钮是表单的一个子组件
  • 如何从视图的表单中获得值
  • 表单有一个itemId为hobbyTpl的子组件,如何去更新它?
  • 表单不知道用户这个概念

What We’ve Got Here是一个失败的沟通者

在线查看示例

现在一举解决余下的问题的时候了,这需要通过事件来实现视图与控制器之间的沟通。控制器只需要知道视图要获取数据,并且需要保存数据。

在onSaveClick事件中,视图中已经聚集了控制器所需的所有数据,因此这里只需要从这里出发一个事件。

app/view/Hobby.js

Ext.define('Example.view.Hobby', {
    // ...
    onSaveClick: function () {
        var me = this,
            values = me.getValues(),
            user = me.getUser();

        me.fireEvent('save', me, values, user);

        me.down('#hobbyTpl').update({
            Name: user.get('Name'),
            FavoriteHobby: values.FavoriteHobby
        });
    },
    // ...
});

这小小的改变就可以让控制器变得足够简单,它只需要知道视图的存在,并会触发一个save事件。

app/controller/Hobby.js

Ext.define('Example.controller.Hobby', {
    extend: 'Ext.app.Controller',
    init: function () {
        this.control({
            'hobbyview': {
                save: this.onSave
            }
        });
    },
    onSave: function (view, values, user) {
        user.set(values);
        user.save();
    }
});

现在,控制器终于不需要再了解视图的结构了。控制器只保存数据,而是他只显示数据。

只要视图一直保持触发save时间,现在就不需要大量修改控制器了。

控制器知道以下内容

  • 视图有一个ItemId为save的按钮
  • 按钮是表单的一个子组件
  • 如何从视图的表单中获得值
  • 表单有一个itemId为hobbyTpl的子组件,如何去更新它?
  • 表单不知道用户这个概念

聪明的视图是重点且易于维护和测试

了解如何拆卸猛犸级的控制器对于团队更好的管理类来说是相当有帮助的。不但是控制器,视图也变得更集中和易于维护,他们也易于测试,而这也更接近于Ext JS视图控制器的功能。让视图变得更聪明还便于应用程序重用他们。

要知道的是:

视图完全有能力管理自己的数据
控制器应该以不了解视图内部结构为前提
自定义事件是处理视图于控制器之间通信的最完美方式

作者: John Krull
原文: http://www.sencha.com/blog/building-maintainable-controllers-in-ext-js-apps/

译者: 黄灯桥
译文: http://blog.csdn.net/tianxiaode/article/details/45918683