extjs - ExtJS 5 MVVM : Updating Parent's ViewModel from Child's

Question

我的ExtJS 5组件的ViewModel继承了祖先的ViewModel的数据。

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

通过在子级上创建该本地myProp，当父级的myProp更改时，由于断绝的关系，子级也不会随之更改。

我只希望myProp属性的1个实例，并且该值位于父对象的ViewModel上。

为了解决这个问题，我的子VM似乎必须知道该属性是继承的还是存储在本地，要求该子知道应用程序的正确体系结构。它必须了解我不满意的更多应用程序体系结构，从而将 child 与 parent 紧密地联系在一起。

示例展示了子级创建新的panelTitle实例而不是更新父级的实例:

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

编辑:将按钮的Click事件移动到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

After talking to Sencha support，我为Ext.app.ViewModel set函数创建了一个替代。

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函数来完成。