如何在 extjs 中的两个视图之间共享相同的 viewModel？

Question

extjs 中的两个或多个视图是否可能共享同一个 viewModel？

例如，如果我有两个视图，如下面的代码所示，这两个视图没有相同的视图模型，而是该视图模型的实例。也许那是意图，但如何实现具有可跨多个视图访问的全局字段，并使用相同的 viewModel 声明。

所以，我想绑定字段name，这样一个视图的变化会自动引起所有对应视图的变化。

           Ext.define('MainModel', {
                extend: 'Ext.app.ViewModel',
                alias: 'viewmodel.main',

                data: {
                    name : '',
                }
            });
            
            Ext.define('View1', {
                extend: 'Ext.Container',    
                xtype: 'view1',

                viewModel: {
                    type: 'main'
                },
                
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Name:',
                    bind: {
                        value: '{name}',
                    }       
                }
                    ]
            });
            
            Ext.define('View2', {
                extend: 'Ext.Container',    
                xtype: 'view2',

                viewModel: {
                    type: 'main'
                },

                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Name:',
                    bind: {
                        value: '{name}',
                    }       
                }
                    ]
                
            });

Answer 1

我认为不可能按照您要求的方式执行此操作。当你绑定到一个数据元素时，系统将首先检查当前组件视图模型，如果它没有找到它会向上父级查找的值，并将继续这个直到找到匹配项或没有更多的父级。因此，如果您想在视图模型中共享数据，您应该将数据存储在父视图模型中。

这是一个fiddle

字段有两种绑定方式，因此当您输入一种方式时，它会更新视图模型，然后另一种方式也会更新。在 fiddle 编辑每个字段，另一个字段将更改。您可以在 viewModel 中设置 属性 或两个字段之一。

此 fiddle 显示通过按钮设置字段的值和父 viewModel 中的数据。