本文地址：[http://blog.csdn.net/sushengmiyan/article/details/38612721](http://blog.csdn.net/sushengmiyan/article/details/38612721) 本文作者：[sushengmiyan](http://blog.csdn.net/sushengmiyan) -------------------------------------------------------------資源鏈接----------------------------------------------------------------------- 翻譯來源：[http://docs.sencha.com/extjs/5.0/application_architecture/view_models_data_binding.html](http://docs.sencha.com/extjs/5.0/application_architecture/view_models_data_binding.html)[](http://docs.sencha.com/extjs/5.0.0/apidocs/#!/api/Ext.toolbar.Toolbar) API Docs：[http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.app.ViewModel](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.app.ViewModel) ------------------------------------------------------------------------------------------------------------------------------------------------ # 組件綁定 數據綁定（DataBinding）和視圖模型（ViewModel）是Ext JS5 新增的強大特性。它們倆可以讓你寫最少的代碼和使用聲明類型的風格來幫助你解耦管理。 一個ViewModel就是一個類，這個類管理數據對象。它允許對數據感興趣的組件來綁定它，并且當發生變化的時候會自動通知到。視圖模型（ViewModel）像ViewController一樣是被視圖View擁有的一個引用。因為視圖模型（ViewModel）和視圖有關系，在組件繼承關系中，祖先擁有的視圖模型自雷也可以去連接。這就允許子類可以簡單繼承父類。 組件擁有一個bind配置屬性，允許關聯任何從ViewModel中來的配置數據。使用bind，你可以很確定的，組件配置的setter方法會在數值變化的時候自動綁定，不需要你自己寫事件處理。 在本指南中，我們可以通過幾個例子來了解一下ViewModels和DataBinding的強大功能。 或許最好的了解Binding和ViewModels的方法就是看你在組件上使用的不同的綁定方法。這是因為，組件是數據綁定的原始用戶，組件是被Ext JS的開發者熟知的。為了可以進行binding操作，我們需要先創建一個ViewModel以便于我們可以后期引入。 ### 綁定和配置（Binding and Configs） 給組件綁定數據就是一個將Ext.app.ViewModel連接到組件的配置屬性去的一個過程。只要有一個setter方法，任何組件的配置都可以被綁定，例如，在Ext.app.panerl.Panel類中有一個setTitle方法，你就可以綁定title配置。 下面的例子，我們給基于ViewModel的panel配置數據，我們可以講我們的數據綁定到width因為有setWidth方法。 ~~~ Ext.create('Ext.panel.Panel', { title: 'Simple Form', viewModel: { type: 'test' // 稍后定義test這個ViewModel }, bind: { html: '<p>Hello {name}</p>', width: '{someWidth}' } }); ~~~ 綁定數據用到的語法和Ext.Template是類似的，你可以江text文本放置在花括號里面，你也可以使用格式化fomatters。不像Ext.Template,當只傳入一個像‘{someWidth}的時候不會被轉化成字符串。 我們稍后會看到，name和somewidth是如何定義的。’上面的例子就是簡單地展示了，數據是如何被組件使用的。 綁定布爾數據配置 像 可見性isible,可用性disable,選中狀態checked還有按鈕的按下狀態pressed是需要配置布爾屬性的。看下面的例子： ~~~ Ext.create('Ext.panel.Panel', { title: 'Simple Form', viewModel: { type: 'test' }, items: [{ xtype: 'button', bind: { hidden: '{!name}' // negated } }] }); ~~~ 當按鈕按下的時候，數值就被傳入到setHidden方法中了，所以傳入的是單個的時候，是不會被解釋成字符串的，這就是一個原因。 ### 綁定和優先級 綁定配置屬性會覆蓋之前靜態定義的，但是也有可能就是會存在一點點的延遲。 ~~~ Ext.create('Ext.panel.Panel', { title: 'Simple Form', viewModel: { type: 'test' }, bind: { title: 'Hello {name}' } }); ~~~ 一旦定義了name綁定，那么‘Simple Form’標題就會被替換。 ### 綁定和子控件 綁定最有用的部分之一就是容器有的數據，子組件都可以獲取。下面的例子，你可以看到，viewmodel的子組件綁定了父容器的數據。 ~~~ Ext.create('Ext.panel.Panel', { title: 'Simple Form', viewModel: { type: 'test' }, layout: 'form', defaultType: 'textfield', items: [{ fieldLabel: 'First Name', bind: '{firstName}' // uses "test" ViewModel from parent },{ fieldLabel: 'Last Name', bind: '{lastName}' }] }); ~~~ ### 綁定的兩種方式 綁定屬性也允許兩種方式的綁定數據。在視圖上修改的數據可以立刻返回到模型中。綁定到這個數據的組件都會被更新。 在上面的例子中，因為‘firstName’和‘lastname’屬性石被text綁定的，在輸入框中的變化會及時通知到后面的ViewModel,為了看清楚具體怎么連接的，我們有必要補充完成例子。 ~~~ Ext.define('TestViewModel', { extend: 'Ext.app.ViewModel', alias: 'viewmodel.test', // connects to viewModel/type below data: { firstName: 'John', lastName: 'Doe' }, formulas: { // We'll explain formulas in more detail soon. name: function (get) { var fn = get('firstName'), ln = get('lastName'); return (fn && ln) ? (fn + ' ' + ln) : (fn || ln || ''); } } }); Ext.define('TestView', { extend: 'Ext.panel.Panel', layout: 'form', // Always use this form when defining a view class. This // allows the creator of the component to pass data without // erasing the ViewModel type that we want. viewModel: { type: 'test' // references alias "viewmodel.test" }, bind: { title: 'Hello {name}' }, defaultType: 'textfield', items: [{ fieldLabel: 'First Name', bind: '{firstName}' },{ fieldLabel: 'Last Name', bind: '{lastName}' },{ xtype: 'button', text: 'Submit', bind: { hidden: '{!name}' } }] }); Ext.onReady(function () { Ext.create('TestView', { renderTo: Ext.getBody(), width: 400 }); }); ~~~ 當上面的面板被展示的時候，我們可以看到輸入框中的變化被反射到面板的標題了，還可以看到提交按鈕的狀態。 ### 綁定組件狀態 有時候，組件的狀態如選擇框的checked或者表格的選中狀態是其它組件關心的事情。當一個組件設置了reference去識別的時候，這個組件就在ViewModel中被大眾化的。 在下面的例子中，我們有一個admin key輸入框，狀態呢是有選擇框的選中狀態決定的。這種行為時動態窗體適合的： ~~~ Ext.create('Ext.panel.Panel', { title: 'Sign Up Form', viewModel: { type: 'test' }, items: [{ xtype: 'checkbox', boxLabel: 'Is Admin', reference: 'isAdmin' },{ xtype: 'textfield', fieldLabel: 'Admin Key', bind: { disabled: '{!isAdmin.checked}' } }] }); ~~~ ### 綁定描述 到目前為止，我們可以看到三種基本的表格綁定描述： {firstName}:這是直接從視圖模型傳過來的，沒有被修改，可以是任何類型。 Hello{name}:可以插入字符 {!isAdmin.checked}可以使有負的標志，即 反，非得概念。 除了以上三種方法還有其他比較少用的方式 ### 多綁定 ~~~ Ext.create('Ext.Component', { bind: { data: { fname: '{firstName}', lname: '{lastName}' } } }); ~~~ 綁定了firstname和lastname ### 綁定記錄 像可以找到id=42的用戶記錄綁定 ~~~ Ext.create('Ext.Component', { bind: { data: { reference: 'User', id: 42 } } }); ~~~ 這需要用到Ext.data.Session ### 關聯綁定 看user的adress屬性 ~~~ Ext.create('Ext.Component', { bind: { data: { reference: 'User', id: 42, association: 'address' } } }); ~~~ 在這個例子中，跟上面記錄綁定是類似一樣的。 ### 綁定操作 下面展示了只綁定一次就銷毀的例子。使用的single操作 ~~~ Ext.create('Ext.Component', { bind: { data: { bindTo: '{name}', single: true } } }); ~~~ 使用deep操作來綁定引用操作的更新 ~~~ Ext.create('Ext.Component', { bind: { data: { bindTo: '{someObject}', deep: true } } }); ~~~ # 創建 視圖模型ViewModels 上面了解了如何綁定，現在是時候學習ViewModel和它提供的功能了。 像之前表述的一樣，ViewModel是管理底層數據的對象。 ### 規則 Formulas 為了捆綁數據，視圖模型提供了方便的方式去計算數據通過的就是formulas，者方便你在視圖中只關注生命結構，不必關注數據依賴。 換句話說，通過這個Formulas數據可以在不修改的情況下顯示不同的數值。 ~~~ Ext.define('TestViewModel2', { extend: 'Ext.app.ViewModel', alias: 'viewmodel.test2', formulas: { x2y: function (get) { return get('x2') * get('y'); }, x2: function (get) { return get('x') * 2; } } }); ~~~ ### 公式與顯式綁定 在上面的例子中,公式的相關性被發現通過檢查函數,然而,這并不總是最好的解決方案。可以使用一個顯式綁定聲明,這將返回一個簡單的對象當所有的值綁定的。 ~~~ Ext.define('TestViewModel2', { extend: 'Ext.app.ViewModel', alias: 'viewmodel.test2', formulas: { something: { bind: { x: '{foo.bar.x}', y: '{bar.foo.thing.zip.y}' }, get: function (data) { return data.x + data.y; } } } }); ~~~