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

guz6ccqo  于 2022-11-05  发布在  其他
关注(0)|答案(1)|浏览(162)

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}',
                    }       
                }
                    ]

            });
8wigbo56

8wigbo561#

我不认为这是可能的,他们的方式,你问。当你绑定到一个数据元素,系统会首先检查当前组件视图模型,如果它没有找到值,它会去父,并会继续下去,直到它找到一个匹配或没有更多的父。所以,如果你想在一个视图模型中共享数据,你应该把数据存储在一个父视图模型。
这里有一把小提琴
字段具有双向绑定,因此当您键入一个字段时,它将更新视图模型,然后另一个字段也将更新。在小提琴上编辑每个字段,另一个字段将更改。您可以在viewModel中设置属性,也可以设置这两个字段中的任何一个。
这个小提琴展示了通过一个按钮设置字段的值和父viewModel中的数据。

相关问题