ExtJS5_MVVM特性的簡單說明

標籤：style   blog   http   io   color   ar   sp   div   on   

下面我們來看一下自動產生的程式碼中的ＭＶＶＭ架構的關係。Main是一個可視的控制項，MainController是這個控制項的控制類，MainModel是這個控制項的模型類。

        在上面的圖片中，左邊是Main.js中的代碼，右邊是MainController.js 和 MainModel.js中的代碼，可以看到MVVM中的事件綁定和屬性值綁定都用到了。中紅色的部分標註了一個按鈕“Button”的handler(即click)事件綁定到MainController.js中的函數“OnClickButton”之上。藍色部分表示將panel的title屬性，綁定到了MainModel的屬性data的name值上，如果你要修改該Panel的值，則只要修改MainModel中的data.name就可以。

        下面我們來看看網頁裡面的具體展示：

        下面做一個最簡單的修改，將panel的title值改為“修改後的title”。修改MainController.js,加入一條語句

Ext.define(‘app.view.main.MainController‘, {            extend : ‘Ext.app.ViewController‘,            requires : [‘Ext.MessageBox‘],            alias : ‘controller.main‘,            onClickButton : function() {                Ext.Msg.confirm(‘Confirm‘, ‘Are you sure?‘, ‘onConfirm‘, this);            },            onConfirm : function(choice) {                if (choice === ‘yes‘) {                    //加入下面這一條語句                    this.getView().getViewModel().set(‘name‘ , "修改後的title");                }            }        });

加入了一條語句

this.getView().getViewModel().set(‘name‘ , "修改後的title");

this.getView().getViewModel().set(‘name‘ , "修改後的title");

這條語句的資訊量也很大，分別來說明一下：

• this表示的是當前的類，也就是MainController的執行個體。
• this.getView() 表示當前控制器控制下的View類執行個體。
• this.getView().getViewModel()表示該view執行個體綁定的Model。
• set(‘name‘,‘修改後的title‘)，將Model的值name修改，修改後panel的title會自動的進行更新。

執行後的結果如下：

        我們對程式的第一處修改得以正確執行。

        對於一個要學習好extjs的人來說，官方的例子和api是必不可少的工具。比如上面的一條語句中，我想得到當前控制器下的View,我也是去api上面的methods中找相應的函數，才能確定到底有沒有和函數名稱是什麼。

ExtJS5_MVVM特性的簡單說明