ExtJS中ViewModel的数据继承

江雪+曹子钰+李洋+钟逸

【摘要】 ExtJS中使用MVVM设计模式时，ViewModel可以通过View的层级关系，继承上级ViewModel的数据。本文说明此种继承的特性以及如何使用这些特性实现不同需求的数据绑定

【关键词】 ExtJS MVVM 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中独立使用的值进行初始化。

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