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