来自 Ext.app.Controller 的 Extjs-6 MVVM 架构数据绑定(bind)？

Question

我正在使用 MVVM architecture的 Extjs-6在我的应用程序中。我的 Controller 如下(注意 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被调用， Controller 显示一个窗口( App.view.gt.Point View )。这个窗口类如下:

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 .如何实现这个问题？

Answer 1

数据绑定(bind)和 ViewController/Controller 没有任何关系，没有 Controller 也可以进行数据绑定(bind)，只需要一个 ViewModel。

绑定(bind)配置没有正确定义，它们就像 XTemplate:

bind : '{myProp.y}'

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

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