[ExtJS5學習筆記]第十節 Extjs5新增特性之ViewModel和DataBinding 元件綁定 建立 視圖模型ViewModels

-------------------------------------------------------------資源連結-----------------------------------------------------------------------

------------------------------------------------------------------------------------------------------------------------------------------------

資料綁定（DataBinding）和視圖模型（ViewModel）是Ext JS5 新增的強大特性。它們倆可以讓你寫最少的代碼和使用聲明類型的風格來幫助你解耦管理。

一個ViewModel就是一個類，這個類管理資料對象。它允許對資料感興趣的元件來綁定它，并且當發生變化的時候會自動通知到。視圖模型（ViewModel）像ViewController一樣是被視圖View擁有的一個引用。因為視圖模型（ViewModel）和視圖有關系，在元件繼承關系中，祖先擁有的視圖模型自雷也可以去連接配接。這就允許子類可以簡單繼承父類。

元件擁有一個bind配置屬性，允許關聯任何從ViewModel中來的配置資料。使用bind，你可以很确定的，元件配置的setter方法會在數值變化的時候自動綁定，不需要你自己寫事件處理。

在本指南中，我們可以通過幾個例子來了解一下ViewModels和DataBinding的強大功能。

或許最好的了解Binding和ViewModels的方法就是看你在元件上使用的不同的綁定方法。這是因為，元件是資料綁定的原始使用者，元件是被Ext JS的開發者熟知的。為了可以進行binding操作，我們需要先建立一個ViewModel以便于我們可以後期引入。

給元件綁定資料就是一個将Ext.app.ViewModel連接配接到元件的配置屬性去的一個過程。隻要有一個setter方法，任何元件的配置都可以被綁定，例如，在Ext.app.panerl.Panel類中有一個setTitle方法，你就可以綁定title配置。

下面的例子，我們給基于ViewModel的panel配置資料，我們可以講我們的資料綁定到width因為有setWidth方法。

綁定資料用到的文法和Ext.Template是類似的，你可以江text文本放置在花括号裡面，你也可以使用格式化fomatters。不像Ext.Template,當隻傳入一個像‘{someWidth}的時候不會被轉化成字元串。

我們稍後會看到，name和somewidth是如何定義的。’上面的例子就是簡單地展示了，資料是如何被元件使用的。

綁定布爾資料配置

像 可見性isible,可用性disable,選中狀态checked還有按鈕的按下狀态pressed是需要配置布爾屬性的。看下面的例子：

當按鈕按下的時候，數值就被傳入到setHidden方法中了，是以傳入的是單個的時候，是不會被解釋成字元串的，這就是一個原因。

綁定配置屬性會覆寫之前靜态定義的，但是也有可能就是會存在一點點的延遲。

一旦定義了name綁定，那麼‘Simple Form’标題就會被替換。

綁定最有用的部分之一就是容器有的資料，子元件都可以擷取。下面的例子，你可以看到，viewmodel的子元件綁定了父容器的資料。

綁定屬性也允許兩種方式的綁定資料。在視圖上修改的資料可以立刻傳回到模型中。綁定到這個資料的元件都會被更新。

在上面的例子中，因為‘firstName’和‘lastname’屬性石被text綁定的，在輸入框中的變化會及時通知到後面的ViewModel,為了看清楚具體怎麼連接配接的，我們有必要補充完成例子。

當上面的面闆被展示的時候，我們可以看到輸入框中的變化被反射到面闆的标題了，還可以看到送出按鈕的狀态。

有時候，元件的狀态如選擇框的checked或者表格的選中狀态是其它元件關心的事情。當一個元件設定了reference去識别的時候，這個元件就在ViewModel中被大衆化的。

在下面的例子中，我們有一個admin key輸入框，狀态呢是有選擇框的選中狀态決定的。這種行為時動态窗體适合的：

到目前為止，我們可以看到三種基本的表格綁定描述：

{firstName}:這是直接從視圖模型傳過來的，沒有被修改，可以是任何類型。

Hello{name}:可以插入字元

{!isAdmin.checked}可以使有負的标志，即 反，非得概念。

除了以上三種方法還有其他比較少用的方式

綁定了firstname和lastname

像可以找到id=42的使用者記錄綁定

這需要用到Ext.data.Session

看user的adress屬性

在這個例子中，跟上面記錄綁定是類似一樣的。

下面展示了隻綁定一次就銷毀的例子。使用的single操作

使用deep操作來綁定引用操作的更新

上面了解了如何綁定，現在是時候學習ViewModel和它提供的功能了。

像之前表述的一樣，ViewModel是管理底層資料的對象。

為了捆綁資料，視圖模型提供了友善的方式去計算資料通過的就是formulas，者友善你在視圖中隻關注生命結構，不必關注資料依賴。

換句話說，通過這個Formulas資料可以在不修改的情況下顯示不同的數值。

在上面的例子中,公式的相關性被發現通過檢查函數,然而,這并不總是最好的解決方案。可以使用一個顯式綁定聲明,這将傳回一個簡單的對象當所有的值綁定的。