ExtJS 5 MVVM：从子级更新父视图模型

Question

My ExtJS 5组件的ViewModel正在从祖先的ViewModel继承数据。

如何从子对象的角度更新父对象的ViewModel数据？如果我尝试在childPanel ViewModel上创建myProp的新实例的childPanel.getViewModel().set('myProp', 'foo');，而不是更新parentPanel的VM。使用myProp值的其他组件将与childPanel不同。

通过在子对象上创建本地myProp，当父对象的myProp发生更改时，由于关系断开，子对象将不会随之更改。

我只想要myProp属性的一个实例，并且该值位于父级的ViewModel上。

要解决此问题，我的子VM似乎必须知道该属性是继承的还是本地存储的，这需要子VM知道应用程序的正确体系结构。它必须比我所熟悉的更多地了解应用程序的体系结构，从而显著地将子级耦合到父级。

---

示例显示子级创建panelTitle的新实例，而不是更新父级的：

https://fiddle.sencha.com/#fiddle/1e09

编辑：将按钮的点击事件移动到ViewController

Ext.application({
    name: 'Fiddle',
    launch: function() {
        Ext.define('ChildPanel', {
            extend: 'Ext.panel.Panel',
            alias: 'widget.childpanel',
            controller: 'childpanelcontroller',
            bind: {
                title: '{panelTitle}'
            },
            // first panel has its own viewmodel, which is a child of the viewport's VM
            viewModel: {
                data: {
                    'btnText': 'Click to Change Title'
                }
            },
            items: [{
                xtype: 'button',
                scale: 'large',
                bind: {
                    text: '{btnText}'
                },
                listeners: {
                    'click': 'onButtonClick'
                }
            }]
        });
        Ext.define('ChildPanelController', {
            extend: 'Ext.app.ViewController',
            alias: 'controller.childpanelcontroller',
            onButtonClick: function(btn) {
                // updates first panel's VM
                this.getViewModel().set('panelTitle', '<span style="color:red;">Now They Have Different Titles</span>');
                debugger;
                window.setTimeout(function() {
                    // by setting the first panel's VM instead of the viewport's, 
                    // the first panel will not use viewport's VM for `panelTitle` property again
                    btn.up('viewport').getViewModel().set('panelTitle', '<span style="color:green;">And Are No Longer Using the Same VM Data</span>');
                }, 500);
            }
        });

        Ext.create('Ext.container.Viewport', {
            viewModel: {
                data: {
                    'panelTitle': 'Both Have the Same Title'
                }
            },
            layout: 'hbox',
            items: [{
                xtype: 'childpanel',
                flex: 1
            }, {
                // second panel uses the viewport's viewmodel
                xtype: 'panel',
                bind: {
                    title: '{panelTitle}'
                },
                flex: 1,
                margin: '0 0 0 25px'
            }]
        });
    }
});

Answer 1

与Sencha支持人员交谈后，我为Ext.app.ViewModelset函数创建了一个覆盖。

Ext.define('Overrides.app.ViewModel', {
    override: 'Ext.app.ViewModel',
    /**
     * Override adds option to only update the ViewModel that "owns" a {@link #property-data} property.
     * It will traverse the ViewModel tree to find the ancestor that the initial ViewModel inherited `path` from.
     * If no owner is found, it updates the initial ViewModel.
     *
     * Only uses the override if `onlyUpdateOwner` parameter is `true`.
     *
     * @param {Boolean} [onlyUpdateOwner=false] If `true`, uses override to update VM where `path` is stored
     * @inheritdoc Ext.app.ViewModel#method-set
     * @override_ext_version ExtJS 5.1.2.748
     */
    set: function (path, value, onlyUpdateOwner) {
        var vm = this,
            foundOwner = false,
            ownerVM = vm;
        onlyUpdateOwner = Ext.valueFrom(onlyUpdateOwner, false);
        if (onlyUpdateOwner) {
            // find ViewModel that initial ViewModel inherited `path` from (if it did)
            do {
                // `true` if `path` ***ever*** had a value (anything but `undefined`)
                if (ownerVM.hadValue && ownerVM.hadValue[path]) {
                    break;
                }
            } while (ownerVM = ownerVM.getParent());
        }

        // reverts to initial ViewModel if did not inherit it
        ownerVM = ownerVM || vm;
        ownerVM.callParent([path, value]);
    }
});

现在，开发人员可以选择只更新作为属性源的ViewModel。

如果找不到"拥有"该属性的ViewModel，则返回到最初从ViewModel调用的。

它通过使用适当的ViewModel上下文调用原始的ExtJS set函数来完成。

Answer 2

为了从任何子组件获取ViewModel，您可以用以下内容覆盖component类：

Ext.define(null, {
    override: 'Ext.Component',
    getVM() {
        let vm = this.up();
        do {
            if(vm.getViewModel())
                break;
         } while (vm = vm.up());
        return vm.getViewModel()
    }
    
});

然后，您可以从任何子组件调用this.getVM（），无论它们有多深。可以使用类似的方法来获取ViewController。

我想知道这个功能是否已经是ExtJS的一部分了。