江雪+曹子鈺+李洋+鐘逸

【摘要】 ExtJS中使用MVVM設(shè)計模式時，ViewModel可以通過View的層級關(guān)系，繼承上級ViewModel的數(shù)據(jù)。本文說明此種繼承的特性以及如何使用這些特性實現(xiàn)不同需求的數(shù)據(jù)綁定

【關(guān)鍵詞】 ExtJS MVVM ViewModel 綁定 數(shù)據(jù)繼承

一、ViewModel與數(shù)據(jù)綁定

在ExtJS的MVVM模式中，ViewModel是用于存放數(shù)據(jù)的類，它將數(shù)據(jù)存放在一個名為data的對象中。關(guān)心該數(shù)據(jù)的界面，可以進(jìn)行綁定，并在數(shù)據(jù)發(fā)生改變時，收到通知，更新界面。因為ViewModel是屬于View所有，所以ViewModel可以通過View的層級關(guān)系，訪問到上級的ViewModel。這樣下級的ViewModel就可以繼承到上級ViewModel的數(shù)據(jù)。

界面組件可以通過一個bind配置將某些配置與ViewModel的data綁定，當(dāng)綁定的data中的數(shù)據(jù)發(fā)生改變時，綁定配置的setter方法會被調(diào)用，實現(xiàn)界面更新。

二、ViewModel數(shù)據(jù)繼承

ViewModel類管理一個data對象，并利用JavaScript原型鏈提供數(shù)據(jù)的繼承，如圖1所示：

這就意味著，所有組件都能讀取到Data 1中存儲的數(shù)據(jù)。如果我們在ViewModel 1中有如下的data：

那么所有組件都可以綁定到 {username}。這樣我們可以用來共享一些需要在各級組件使用的重要記錄，如當(dāng)前用戶。如果我們需在下級組件綁定中，修改上級共享的數(shù)據(jù)，則應(yīng)當(dāng)使用一個對象來存放數(shù)據(jù)。舉個例子，如果在Container 2中，有一個文本框，雙向綁定到 {username}，如下所示：

該文本框通過Data 2的原型鏈?zhǔn)盏絹碜訢ata 1的數(shù)據(jù)“user1”。但在文本框中修改數(shù)據(jù)后，卻保存在Data 2中。這是因為，該文本框是綁定到它自己的ViewModel的data對象上，因此雙象綁定會調(diào)用ViewModel 2上的set方法，將username保存到Data 2中。這一特性，可以用來對那些需要在不同的View中獨立使用的值進(jìn)行初始化。

但如果要通過繼承實現(xiàn)屬性的共享，那么就需要使用對象來存儲數(shù)據(jù)，如下所示：endprint