ExtJS中ViewModel的數(shù)據(jù)繼承

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

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

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

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

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

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

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

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

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

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

該文本框通過Data 2的原型鏈?zhǔn)盏絹碜訢ata 1的數(shù)據(jù)“user1”。但在文本框中修改數(shù)據(jù)后，卻保存在Data 2中。這是因?yàn)椋撐谋究蚴墙壎ǖ剿约旱腣iewModel的data對(duì)象上，因此雙象綁定會(huì)調(diào)用ViewModel 2上的set方法，將username保存到Data 2中。這一特性，可以用來對(duì)那些需要在不同的View中獨(dú)立使用的值進(jìn)行初始化。

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