Question

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

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

通过在孩子身上创建本地myProp，当父母的myProp发生变化时，由于关系断绝，孩子不会随之改变。

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

为了解决这个问题，似乎我的孩子VM必须知道该属性是否被继承或者是否存储在本地，要求孩子知道正确的应用程序架构。它必须更多地了解应用程序的架构，而不是我熟悉的，将孩子与父母显着耦合。

示例显示子项创建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的选项。

如果找不到＆＃34;拥有＆＃34;的ViewModel？该属性，它回退到最初调用的ViewModel。

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

ExtJS 5 MVVM：从Child的更新Parent的ViewModel

1 个答案: