Create a Model:
一個(gè)model中的業(yè)務(wù)數(shù)據(jù)可以由不同的格式來(lái)定義：
還有一種特殊的model類(lèi)型叫做 "resource model". This model type is used as a wrapper object around a resource bundle file. 文件名以.properties 結(jié)尾楞陷，通常用在存放多語(yǔ)言相關(guān)的text.
當(dāng)創(chuàng)建JSON, XML以及resource model這些類(lèi)型的model時(shí)结执，它們包含的內(nèi)容是一次性載入的（local file或者request web server）献幔。換句話(huà)說(shuō)趾诗，在請(qǐng)求完這些類(lèi)型的model的數(shù)據(jù)之后恃泪，整個(gè)model對(duì)于application都是可見(jiàn)狀態(tài)了。
這些Model類(lèi)型被稱(chēng)為client-side models糕非，類(lèi)似于filtering和sorting之類(lèi)的任務(wù)都在client本地執(zhí)行朽肥。
對(duì)比OData model類(lèi)型，是另外一種server-side models。意味著不管何時(shí)application需要從model取得數(shù)據(jù)州刽，必須從server端去request穗椅。基本每次request不會(huì)返回全部的數(shù)據(jù)宣鄙，因?yàn)閿?shù)據(jù)量一般比較龐大冻晤。因此锦茁，類(lèi)似sorting和filtering的任務(wù)每次都會(huì)分配到server端绣硝。
Creat Property Binding:
Preview
Figure : Screen with text derived from various sources (No visual changes to last step)
Coding
webapp/index.html
...
<script>
// Attach an anonymous function to the SAPUI5 'init' event
sap.ui.getCore().attachInit(function () {
// Create a JSON model from an object literal
var oModel = new sap.ui.model.json.JSONModel({
greetingText: "Hi, my name is Harry Hawk"
});
// Assign the model object to the SAPUI5 core
sap.ui.getCore().setModel(oModel);
// Display a text element whose text is derived
// from the model object
new sap.m.Text({ text : "{/greetingText}" }).
placeAt("content");
});
</script>
...
sap.m.Text control的 text property設(shè)值為 {/greetingText}. 大括號(hào)括起來(lái)的binding path會(huì)被自動(dòng)識(shí)別為是binding够傍。這些binding稱(chēng)為PropertyBindings 。在這個(gè)例子里寂诱，控件的text property被綁定到位于default model的root路徑的 greetingText 痰洒。binding路徑開(kāi)頭的斜杠 (/) 表示是絕對(duì)綁定路徑浴韭。
Two-Way Data Binding:
Preview
Figure: Input fields can be enabled or disabled
Coding
webapp/view/App.view.xml (New)
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc">
<Panel headerText="{/panelHeaderText}" class="sapUiResponsiveMargin" width="auto">
<content>
<Label text="First Name" class="sapUiSmallMargin" />
<Input value="{/firstName}" valueLiveUpdate="true" width="200px" enabled="{/enabled}" />
<Label text="Last Name" class="sapUiSmallMargin" />
<Input value="{/lastName}" valueLiveUpdate="true" width="200px" enabled="{/enabled}" />
<CheckBox selected="{/enabled}" text="Enabled" />
</content>
</Panel></mvc:View>
這里創(chuàng)建了一個(gè)新的view目錄，和一個(gè)新的XML view嗡靡。
webapp/index.html
<!DOCTYPE html><html><head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>SAPUI5 Data Binding Tutorial</title>
<script
id="sap-ui-bootstrap"
src="../../../../../../../../../resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
data-sap-ui-resourceroots='{ "sap.ui.demo.db": "./" }'
>
</script>
<script>
// Attach an anonymous function to the SAPUI5 'init' event
sap.ui.getCore().attachInit(function () {
// Create a JSON model from an object literal
var oModel = new sap.ui.model.json.JSONModel({
firstName: "Harry",
lastName: "Hawk",
enabled: true,
panelHeaderText: "Data Binding Basics"
});
// Assign the model object to the SAPUI5 core
sap.ui.getCore().setModel(oModel);
// Display the XML view called "App"
new sap.ui.core.mvc.XMLView({ viewName : "sap.ui.demo.db.view.App" })
.placeAt("content");
});
</script></head><body class="sapUiBody" id="content"></body></html>
- 在bootstrap里增加data-sap-ui-resourcerouts 參數(shù)柿祈。
- 刪掉了上一步的sap.m.Text控件谍夭，用新建的XML view（用它的resource name調(diào)用）取而代之紧索。
- 刷新頁(yè)面之后珠漂，嘗試選擇和取消checkbox，可以觀(guān)察到input框會(huì)根據(jù)checkbox的狀態(tài)自動(dòng)enable和disable
雖然我們沒(méi)有寫(xiě)任何代碼在UI和model之間傳值，但是Input控件的狀態(tài)可以隨著checkbox的狀態(tài)變化抓谴。SAPUI5的model實(shí)現(xiàn)了雙向數(shù)據(jù)綁定（two-way data binding ）。對(duì)于JSON類(lèi)型的model來(lái)說(shuō)滩届，默認(rèn)的設(shè)置就是two-way binding帜消。
注意兩點(diǎn):
- 數(shù)據(jù)綁定使得控件的property可以從一個(gè)model中獲得任何一個(gè)合適的property的值浓体。
- SAPUI5會(huì)自動(dòng)處理從model到控件的數(shù)據(jù)傳輸汹碱，以及從控件到model的傳值咳促。這種方式叫做two-way binding.
One-Way Data Binding:
Preview
Figure: Two-way data binding disabled for the checkbox
Coding
webapp/index.html
...
<script>
var oModel = new sap.ui.model.json.JSONModel({
firstName : "Harry",
lastName : "Hawk",
enabled : true,
panelHeaderText : "Data Binding Basics"
});
oModel.setDefaultBindingMode(sap.ui.model.BindingMode.OneWay);
// Assign the model object to the SAPUI5 core
sap.ui.getCore().setModel(oModel);
...
加入如上語(yǔ)句，改變綁定模式為one-way冲茸。
修改后轴术， 不管checkbox的狀態(tài)如何逗栽，input框保持可以輸入鳄虱。
單向綁定（one-way binding）保證了數(shù)據(jù)永遠(yuǎn)只從model傳向UI决记。
綁定模式（單向/雙向）是設(shè)置在model對(duì)象上的系宫。所以楼镐，除非你顯式的改變它，一個(gè)新的binding instance就會(huì)使用默認(rèn)模式凄杯。
要改變binding mode戒突， 有兩種方式：
- 改變model的默認(rèn)binding mode描睦。就像上面例子里做的那樣忱叭。
- 為一個(gè)binding instance指定一個(gè)binding mode韵丑，使用參數(shù) oBindingInfo.mode钓株。這樣的話(huà)，只改變某個(gè)特定binding instance的mode碗短。其它的
binding instances 仍舊使用默認(rèn)mode。參考 API Reference: sap.ui.base.ManagedObject.bindProperty
.
Note
關(guān)于改變binding mode要注意的兩點(diǎn): - 如果改變了一個(gè)model的默認(rèn)binding mode (像例子中的做法), 那么除非你在顯式地修改回來(lái)，所有之后的binding instances會(huì)使用修改過(guò)的binding mode.
- 修改一個(gè)model的默認(rèn)binding mode咳秉，對(duì)于已經(jīng)生成的binding instance不會(huì)起效向挖。
