數(shù)據(jù)綁定指將 Model 的數(shù)據(jù)綁定到 UI型酥，如果是雙向綁定 (two-way binding)，則任何一方的變化會反映在另外一方; 如果是單向綁定 (one-way binding)查乒，則方向是從 Model 到 UI弥喉，即 Model 數(shù)據(jù)的變化會反映在 UI，但 UI 的變化不會自動到 Model玛迄，需要手工提交由境。
我們先以一個例子來看一看綁定后的效果。頁面上有兩個控件： sap.m.Text 和 sap.m.Input 。 sap.m.Input 用于輸入虏杰， sap.m.Text 用于顯示 sap.m.Input 輸入變更后讥蟆，與 sap.m.Input 同步的數(shù)據(jù)。
數(shù)據(jù)
數(shù)據(jù)來自 json 文件纺阔，包含兩個供應(yīng)商主數(shù)據(jù)的基本信息瘸彤。
{
"Suppliers": [
{
"ID" : 1,
"Name" : "Exotic Liquids",
"Address": {
"Street": "NE 228th",
"City": "Sammamish",
"State": "WA",
"ZipCode": "98074",
"Country": "USA"
}
},
{
"ID" : 2,
"Name" : "Tokyo Traders",
"Address": {
"Street": "NE 40th",
"City": "Redmond",
"State": "WA",
"ZipCode": "98052",
"Country": "USA"
}
}
]
}
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m, sap.ui.layout"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-compactVersion="Edge"
data-sap-ui-bindingSyntax="Complex">
</script>
<!-- application area -->
<script src="jscode/app1.js">
</script>
</head>
<body class="sapUiBody sapUiResponsiveMargin" role="application">
<div id="content"></div>
</body>
</html>
將代碼文件寫在app1.js中，這樣index.html就可以保持不變笛钝。
app1.js
/**
* openui5 application area
*/
sap.ui.getCore().attachInit(function() {
// application data
var oModel = sap.ui.model.json.JSONModel();
oModel.loadData("models/suppliers.json");
sap.ui.getCore().setModel(oModel);
var oText = new sap.m.Text({text: "{/Suppliers/0/Name}"});
var oInput = new sap.m.Input({value: "{/Suppliers/0/Name}"});
oText.placeAt("content");
oInput.placeAt("content");
});
將json數(shù)據(jù)的第一個供應(yīng)商name同時綁定到sap.m.Input的value屬性和sap.m.Text的Text屬性钧栖，這樣，當(dāng)Input的value改變時婆翔，Text的text屬性也隨之改變。
屬性綁定的方法
- 在構(gòu)造器的setting中設(shè)置(如上面的示例)
- bindProperty()方法
- 控件的bindXXX()方法
sap.ui.base.ManagedObject類提供bindProperty()方法掏婶，因為控件都繼承自ManagedObject啃奴，所以可以利用這個方法綁定數(shù)據(jù)。
語法：bindProperty(sName, oBindingInfo): [sap.ui.base.ManagedObject]
Bind a property to the model. The Setter for the given property will be called with the value retrieved from the data model. This is a generic method which can be used to bind any property to the model. A managed object may flag properties in the metamodel with bindable="bindable" to get typed bind methods for a property. A composite property binding which may have multiple paths (also known as Calculated Fields) can be declared using the parts parameter. Note a composite binding is read only (One Way).
注意方法的第二個參數(shù)是一個object類型的對象雄妥，稱為binding information最蕾，包括path, model, formatter等信息。
比如剛才對sap.m.Text的text屬性綁定老厌，可以這樣寫：
var oText = new sap.m.Text();
oText.bindProperty("text", "/Suppliers/0/Name");
如果要明確指定使用單向綁定：
var oText = new sap.m.Text();
oText.bindProperty("text", {
path: "/Suppliers/0/Name",
mode: sap.ui.model.BindingMode.OneWay
});
使用unbindProperty()方法解綁瘟则。
bindProperty是一個通用的方法(generic method)，對于具體的控件來說枝秤，還會提供bindXXX方法和unbindXXX方法(XXX為屬性名)醋拧。以sap.m.Text來說，提供了bindText()和unbindText()方法淀弹。sap.m.Input來說丹壕，提供了bindValue()和unbindValue()方法：
var oText = new sap.m.Text();
oText.bindText("/Suppliers/0/Name");
var oInput = new sap.m.Input();
oInput.bindValue("/Suppliers/0/Name");
綁定路徑及復(fù)雜綁定
最后給出一個顯示供應(yīng)商及地址的代碼，注意以下要點：
- 屬性綁定的路徑
- 供應(yīng)商地址使用復(fù)雜綁定(complex binding)的寫法
- 使用
sap.m.Panel控件實現(xiàn)布局(layout)
頁面顯示第一個供應(yīng)商的信息薇溃，界面如下：
項目文件結(jié)構(gòu)如下：
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m, sap.ui.layout"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-compactVersion="Edge"
data-sap-ui-preload="async"
data-sap-ui-bindingSyntax="complex"
data-sap-ui-resourceroots='{"stone.demo": "./"}'>
</script>
<!-- application area -->
<script src="jscode/app_supplier_info.js">
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
Application area代碼寫在app_supplier_info.js中菌赖，注意bootstrap中增加了data-sap-ui-bindingSyntax="complex"聲明，表示需要使用復(fù)雜綁定的語法沐序。所謂復(fù)雜綁定琉用，就是在控件中，可以對綁定的數(shù)據(jù)進行計算策幼，比如說邑时，西方的地址包括street, city, zip code, state, country等，我們使用一個控件來顯示這些信息垄惧。如果沒有這句申明刁愿，數(shù)據(jù)就會顯示不出來。
app_supplier_info.js
/**
* openui5 application area
* show supplier information
*
* Written by Stone Wang on Jan 08, 2017
*/
sap.ui.getCore().attachInit(function() {
// application data
var oModel = sap.ui.model.json.JSONModel();
oModel.loadData("models/suppliers.json");
sap.ui.getCore().setModel(oModel);
sap.ui.xmlview({
viewName: "stone.demo.view.supplier_info"
}).placeAt("content");
});
supplier_info.view.xml
<core:View xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout"
xmlns="sap.m"
xmlns:html="http://www.w3.org/1999/xhtml">
<Panel headerText="供應(yīng)商信息" class="sapUiResponsiveMargin" width="auto">
<content>
<Text text="Supplier Id:" class="sapUiSmallMargin" />
<Text text="{/Suppliers/0/ID}" width="5px" class="sapUiSmallMargin" />
<Text text="Supplier name:" class="sapUiSmallMargin" />
<Text text="{/Suppliers/0/Name}" width="100px" class="sapUiSmallMargin" />
</content>
</Panel>
<Panel class="sapUiResponsiveMargin" width="auto">
<content>
<l:VerticalLayout>
<Label text="Address:" class="sapUiSmallMargin" />
<Text text="{/Suppliers/0/Address/Street}, \n
{/Suppliers/0/Address/ZipCode} {/Suppliers/0/Address/City}, \n
{/Suppliers/0/Address/State}, {/Suppliers/0/Address/Country}"
class="sapUiSmallMargin" />
</l:VerticalLayout>
</content>
</Panel>
</core:View>
地址使用的是復(fù)雜綁定：
<Text text="{/Suppliers/0/Address/Street}, \n
{/Suppliers/0/Address/ZipCode} {/Suppliers/0/Address/City}, \n
{/Suppliers/0/Address/State}, {/Suppliers/0/Address/Country}"
class="sapUiSmallMargin" />
- 供應(yīng)商信息使用兩個
sap.m.Panel來顯示到逊。 - 在地址中铣口，有換行
\n和逗號滤钱，通過復(fù)雜綁定，實現(xiàn)了一個控件顯示地址中Street, City, Zip code, State, Country等多個信息脑题，并且按西方地址的習(xí)慣多行顯示件缸。 - 在控件的class屬性中，Panel用sapUiResponsiveMargin叔遂，其他控件用sapUiSmallMargin他炊，頁面更加美觀。
