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

Posted 周六, 05/23/2015 - 01:44 by admin

你好，“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时间，现在就不需要大量修改控制器了。

控制器知道以下内容