内容发布更新时间 : 2024/4/28 11:01:35星期一 下面是文章的全部内容请认真阅读。

ExtJS中ViewModel的数据继承

一、ViewModel与数据绑定

在ExtJS的MVVM模式中，ViewModel是用于存放数据的类，它将数据存放在一个名为data的对象中。关心该数据的界面，可以进行绑定，并在数据发生改变时，收到通知，更新界面。因为ViewModel是属于View所有，所以ViewModel可以通过View的层级关系，访问到上级的ViewModel。这样下级的ViewModel就可以继承到上级ViewModel的数据。

界面组件可以通过一个bind配置将某些配置与ViewModel的data绑定，当绑定的data中的数据发生改变时，绑定配置的setter方法会被调用，实现界面更新。 二、ViewModel数据继承

ViewModel?管理一个data对象，并利用JavaScript原型链提供数据的继承，如图1所示：

这就意味着，所有组件都能读取到Data 1中存储的数据。如果我们在ViewModel 1中有如下的data：

那么所有组件都可以绑定到 {username}。这样我们可以用来共享一些需要在各级组件使用的重要记录，如当前用户。如果我们需在下级组件绑定中，修改上级共享的数据，则应当使用一个对象来存放数据。举个例子，如果在Container 2中，有一个文本框，双向绑定到 {username}，如下所示：

该文本框通过Data 2的原型链收到来自Data 1的数据“user1”。但在文本框中修改数据后，却保存在Data 2中。这是因为，该文本框是绑定到它自己的ViewModel的data对象上，因此双象绑定会调用ViewModel 2上的set方法，将username保存到Data 2中。这一特性，可以用来对那些需要在不同的View中独立使用的值进行初始化。

但如果要通过继承实现属性的共享，那么就需要使用对象来存储数据，如下所示：