您的位置:首页 > 产品设计 > UI/UE

SAPUI5 (11) - 数据绑定之属性绑定(property binding)

2017-01-07 20:46 393 查看
数据绑定指将model的数据绑定到控件,如果是双向绑定(two-way binding),则任何一方的变化会反映在另外一方; 如果是单向绑定(one-way binding),则方向是从model到控件,即model数据的变化会反映在控件,而不会有相反的方向。

什么是双向绑定

我们先以一个例子来看一看绑定的效果。要实现的功能是将页面上的
sap.m.Text
sap.m.Input
控件都绑定到json数据,当改变
sap.m.Input
value的时候,
sap.m.Text
也会跟着改变。

数据

数据是json格式,包含两个供应商主数据的基本信息。

{
"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数据的第一个供应商name同时绑定到
sap.m.Input
的value属性和
sap.m.Text
的Text属性,这样,当Input的value改变时,Text的text属性也随之改变。

属性绑定的方法

在构造器的setting中设置(如上面的示例)

bindProperty()方法

控件的bindXXX()方法

sap.ui.base.ManagedObject
类提供
bindProperty()
方法,因为控件都继承自
ManagedObject
,所以可以利用这个方法绑定数据。

语法:
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).

注意方法的第二个参数是一个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");


绑定路径及复杂绑定

最后给出一个显示供应商及地址的代码,注意以下要点:

1) 属性绑定的路径

2) 供应商地址使用复杂绑定(complex binding)的写法

3) 使用
sap.m.Panel
控件实现布局(layout)

页面显示第一个供应商的信息,界面如下:



项目文件结构如下:



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"
声明,表示需要使用复杂绑定的语法。所谓复杂绑定,就是在控件中,可以对绑定的数据进行计算,比如说,西方的地址包括street, city, zip code, state, country等,我们使用一个控件来显示这些信息。如果没有这句申明,数据就会显示不出来。

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="供应商信息" 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>


地址使用的是复杂绑定:

<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" />


供应商信息使用两个
sap.m.Panel
来显示。

在地址中,有换行
\n
和逗号,通过复杂绑定,实现了一个控件显示地址中Street, City, Zip code, State, Country等多个信息,并且按西方地址的习惯多行显示。

在控件的class属性中,Panel用sapUiResponsiveMargin,其他控件用sapUiSmallMargin,页面更加美观。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: