[ExtJS5學習筆記]第十節 Extjs5新增特性之ViewModel和DataBinding，extjs5viewmodel

[ExtJS5學習筆記]第十節 Extjs5新增特性之ViewModel和DataBinding，extjs5viewmodel

本文地址：http://blog.csdn.net/sushengmiyan/article/details/38612721

本文作者：sushengmiyan

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

翻譯來源：http://docs.sencha.com/extjs/5.0/application_architecture/view_models_data_binding.html

API Docs：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的方法就是看你在組件上使用的不同的Binder 方法。這是因為，組件是資料繫結的原始使用者，組件是被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;            }        }    }});