来自 Ext.app.Controller 的 Extjs-6 MVVM 架构数据绑定？答案

【问题标题】：Extjs-6 MVVM architecture data binding from Ext.app.Controller?来自 Ext.app.Controller 的 Extjs-6 MVVM 架构数据绑定？
【发布时间】：2015-08-03 09:56:50
【问题描述】：

我在我的应用程序中使用了Extjs-6 中的MVVM architecture。我的控制器如下（注意extend: 'Ext.app.Controller'）：

Ext.define('App.controller.gt.Point', {
    extend: 'Ext.app.Controller',
    myProp: {
        x: 'x',
        y: 'y'
    },
    init: function()
    {
        ...
    },
    activateDrawing: function()
    {
        ...
        // I want to send myProp to 'App.view.gt.Point' view and 
        // it(myProp) use binding
        var pointWin = Ext.create('App.view.gt.Point', {});
    }
});

如果调用activateDrawing，控制器会显示一个窗口（@987654326@ 视图）。这个窗口类如下：

Ext.define('App.view.gt.Point', {
    extend: 'Ext.window.Window',
    ...
    controller: 'gt-point',
    viewModel: 'gt-point',
    items: [{
        xtype: 'form',
        items: [{
            xtype: 'numberfield',
            fieldLabel: 'X',

            /*
            * I want to bind the numberfield with myProp.x
            */
            bind: '{myProp.x}',

        }, {
            xtype: 'numberfield',
            fieldLabel: 'Y',

            /*
            * I want to bind the numberfield with myProp.y
            */
            bind: '{myProp.y}',

        }]
    }],
    buttons: [{text: 'OK', action: 'OK', handler: 'onOk'}],
    ...
});

如果数字字段x 和y 被更改，我想自动更改myProb.x 和myProb.y。这个问题如何实现？

【问题讨论】：

标签： extjs mvvm data-binding extjs6 extjs6-classic

【解决方案1】：

数据绑定和ViewController/Controller是没有关系的，没有控制器也可以进行数据绑定，只需要一个ViewModel。

绑定配置没有正确定义，它们就像 XTemplate：

bind : '{myProp.y}'

假设您的 ViewModel 中有 myProp，如下所示：

data : {
    myProp : {
       x : 'foo',
       y : 'bar'
    }
}

【讨论】：

myProp 是一个App.controller.gt.Point（扩展Ext.app.Controller）属性。我想将此属性发送给查看，然后配置绑定。
数据绑定对类的属性不起作用，它们对 ViewModel 中的数据起作用。此外，开箱即用，ViewModel 仅适用于绑定到组件，而不仅仅是任何类。
但是我可以在类初始化时将我的属性发送到组件（App.view.gt.Point）并添加myProp作为组件绑定数据吗？
我认为最好重新考虑您的工作方式。您可以让 ViewModel 保存数据，而不是在 Controller 上做所有事情吗？您的全局控制器只需要解析您的 ViewModel，您可以通过多种方式来解决。
如果视图有ViewModel，则任何子项（任何级别）都可以访问ViewModel 的数据。

【解决方案2】：

您必须将 numberfield 的值绑定到 myProp.x 和 myProp.y。 myProp 也必须在 viewModel 中，而不是在控制器中。

Ext.define('App.view.gt.Point', {
extend: 'Ext.window.Window',
...
controller: 'gt-point',
viewModel: {
    data:{
        myProp: {
            x: 'x',
            y: 'y'
        }
    }
},
items: [{
    xtype: 'form',
    items: [{
        xtype: 'numberfield',
        fieldLabel: 'X',

        /*
        * I want to bind the numberfield with myProp.x
        */
        bind: {
            value:'{myProp.x}'
        }

    }, {
        xtype: 'numberfield',
        fieldLabel: 'Y',

        /*
        * I want to bind the numberfield with myProp.y
        */
        bind: {
            value:'{myProp.y}'
        }

    }]
}],
buttons: [{text: 'OK', action: 'OK', handler: 'onOk'}],
...
});

【讨论】：