OPEN(SAP) UI5 學習入門系列之三：MVC （上） - 模型

此次咱們來一塊兒學習MVC，這個專題分爲兩個小節，本次主要是總覽以及模型，下一次着重會介紹視圖以及控制器，由於控制器其實沒有太多能夠講的，因此和視圖合併在一塊。javascript

1 Model View Controller （MVC）的基本概念

MVC，對於大多數人說，這是一個講爛了的概念。不過，既然這是一個入門系列，仍是要稍微講一講。html

M 表明Model - 模型
通常用來管理數據層，好比綁定後臺數據。
V 表明View - 視圖
通常用來處理展現層，好比具體前端UI的展現。
C 表明Controller - 控制器
通常用來處理邏輯，但是頁面邏輯也能夠是協調處理數據的邏輯

不一樣的程序設計語言，只要涉及到有前端交互的，通常都會有MVC的概念，這個概念是想通的，可是具體到細節層面仍是會有差異，因此下面的內容都是針對UI5的MVC而言。前端

Figure 1: MVC的關係java

MVC最主要的目的是把展現與邏輯、數據分離開來，使得程序更容易閱讀、容易理解，從而也更能夠維護，同時，也增長了可擴展性。 sql

視圖和控制器通常是1:1對應的，可是也能夠建立一個沒有視圖的控制器，這樣的控制器叫作應用控制器， Application Controller ；同時，也能夠建立一個沒有控制器的視圖。數據庫

2 UI5中的模型概念

前面講到，模型的主要做用是提供數據，好比如何從後臺數據庫獲取數據，如何更新後臺數據等等。 json

UI5提供瞭如下預約義的模型：後端

JSON 模型：
屬於客戶端(client-side model)模型，因此比較適合小型數據集，JSON模型支持雙向綁定。
類名：sap.ui.model.json.JSONModel
XML模型：
一樣屬於客戶端模型。
類名：sap.ui.model.xml.XMLModel
Resource模型：
這個比較特殊，它是經過資源包(Resource Bundle)的方式來處理數據，通常咱們能夠用它來作多語言處理。
類名：sap.ui.model.resource.ResourceModel
OData模型：
屬於服務端模型(server-side model)，因此必須提供服務端OData的資源URL來綁定到對應的UI5控件。
類名：sap.ui.model.odata.ODataModel

2.1 綁定模式

這裏有一個綁定模式(Binding Model)的概念，綁定模式定了數據資源是如何被綁定的，UI5裏面綁定模式有三種： api

One Way: 從模型到視圖的單向綁定。咱們能夠簡單的認爲單向綁定是一種只讀的綁定，若是視圖裏面的某個字段的值變動了，不會對模型形成影響。若是想要更新數據，就必需要經過控制器來手動控制更新數據到模型，而後這個模型所綁定到視圖的全部字段都會自動更新一次。
View(UI: input box value) –manually update–> Model –automatically–> View ¹

Two Way: 從模型到視圖和視圖到模型的雙向綁定，若是視圖中的某個字段的值變動了，模型會自動更新，同時，這個模型所綁定到視圖的其餘控件數據。
View(UI: input box value) –automatically–> Model –automatically–> View
One Time: 一次性綁定，有些相似單向綁定，可是若是模型有變動的話，系統不會自動刷新數據，因此通常用來綁定靜態文本。

Table 1: 模型以及相應支持的綁定模式
Model	One-way	Two-way	One-time
Resource model	--	--	X
JSON model	X	X	X
XML model	X	X	X
OData model	X	X	X

2.2 綁定類型

瞭解了綁定模式，咱們再來看綁定類型(Binding Type)，簡單的說綁定模式要處理的是怎麼綁定的問題，綁定類型要處理的是綁定到哪的問題。 UI5中提供了三種綁定類型。數組

2.2.1 Property Binding

Property Binding容許控件的某些屬性直接綁定到模型的數據從而能夠自動初始化以及當後臺數據變更時能夠自動刷新。

定義property Binding有兩種方法：

經過控件的構造器在 seetings 對象中綁定
經過控件的 bindProperty 方法綁定

通常最多見的方式就是直接利用構造器的settings對象來直接綁定模型，好比：

var oTextField = new sap.ui.commons.TextField({
    value: "{/company/name}"
});

稍稍作一點說明，當有多個數據模型綁定到當前控件以及祖先控件時，須要用在綁定的字段以前加上模型名稱，好比 "{mymodel>/company/name}" 。

若是須要對這個綁定作更多的定義，能夠跟進一步，用如下的擴展語法格式：

var oTextField = new sap.ui.commons.TextField({
value: {
           path: "/company/name", 
           mode: sap.ui.model.BindingMode.OneWay
   }
});

這裏顯式的把綁定的模型字段賦給 path ，注意這裏就不須要套上大括號了。

經過控件的 bindProperty 方法則提供了更多的選項，可讓用戶在稍後而不是初始化的時候來綁定。

oTextField.bindProperty("value", "/company/name");

以及相似的

oTextField.bindProperty("value", {
   path: "value",
   type: new sap.ui.model.type.Integer()
});

有一些控件作了進一步的封裝，好比文本框，因爲 value 是常常須要用來綁定模型的屬性，因此直接提供了 bindValue 方法以方便使用。

oTextField.bindValue("/company/name");

當須要對綁定的字段作更多的處理，而不是簡單的一對一綁定時，UI5還提供了 formatter 這個屬性方法，用法以下：

oTextField.bindProperty("value", "/company/title", function(sValue) {
    return sValue && sValue.toUpperCase();
});

oControl = new sap.ui.commons.TextField({
    value: {
        path:"/company/revenue",
        formatter: function(fValue) {
            if (fValue) {
                return "> " + Math.floor(fValue/1000000) + "M";
            }
            return "0";
        }
    }
})

例子中分別提供了用構造器的方法和用 bindProperty 的方法來對要綁定的字段作format的示例。

2.2.2 Aggregation Binding

Aggregation binding主要是用來綁定子控件，對應的模型數據的結構也必須符合必定的樹狀結構關係。

一樣，和Property Binding相似，能夠經過控件構造器的 settings 對象或者是 bindAggregation 方法來綁定模型，可是有一點不一樣的是，Aggregation Binding須要指定所謂的 template ，這是由於Property Binding是一個數據條目綁定到一個控件的字段，屬於一對一的綁定，而Aggregation Binding，則是一組數據綁定到一組控件，好比將多個銷售訂單綁定到一個表控件的多個item中，屬於一個數組到另外一個數組的綁定。這個所謂的 template 其實就是咱們建立一個item，而後系統在render的時候會參照咱們建立的這個item，拷貝多個相同的items並綁定對應的數據。能夠想象成兩個數組，一個是數據數組，一個是Item控件數組，數據已經肯定了，可是系統不知道須要建立哪一個Item來綁定數據，須要咱們幫它建立一個，接下來，系統就會建立和數據數組相同數量的Item控件，而且綁定和數據數組相同索引的數據。

var oItemTemplate = new sap.ui.core.ListItem({text:"{name}"});
var oComboBox = new sap.ui.commons.ComboBox({
    items: {
                path: "/company/contacts", 
                template: oItemTemplate
        }
});

或者經過方法調用來綁定：

oComboBox.bindAggregation("items", "/company/contacts", new sap.ui.core.ListItem({text:"{name}"}));

2.2.3 Element Binding

Element Binding能夠容許咱們把模型數據的某個特定的對象綁定到一個控件上（不是控件的某個屬性），從而咱們能夠在控件的 property 或者 aggregation 中直接使用綁定到這一級的模型的下級對象，換句話說，容許咱們在綁定數據的時候使用相對路徑的方式。

譬如：

oControl.bindElement("/company");
oControl.bindProperty("value", "name");

Element Binding使用場景比較簡單，這裏就很少說了。

3 分析與總結

本次咱們學習了UI5中的模型的概念、類型以及如何使用。做爲一套前端UI庫，SAP的重點其實仍是在於企業級的數據交互與展現，因此數據模型以及數據綁定就顯得尤其重要，後面但願有機會能夠一塊兒探討後端模型的輸出，好比Netweaver以及HANA中是如何提供這些數據模型的。

Footnotes:

Refer to https://www.youtube.com/watch?v=vY5_ifnvDa8 at 7:02.