SAPUI5 (11) - 数据绑定之属性绑定(property binding)
2017-01-07 20:46
399 查看
数据绑定指将model的数据绑定到控件,如果是双向绑定(two-way binding),则任何一方的变化会反映在另外一方; 如果是单向绑定(one-way binding),则方向是从model到控件,即model数据的变化会反映在控件,而不会有相反的方向。
将代码文件写在app1.js中,这样index.html就可以保持不变。
将json数据的第一个供应商name同时绑定到
bindProperty()方法
控件的bindXXX()方法
语法:
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等信息。
比如刚才对
如果要明确指定使用单向绑定:
使用
bindProperty是一个通用的方法(generic method),对于具体的控件来说,还会提供bindXXX方法和unbindXXX方法(XXX为属性名)。以
1) 属性绑定的路径
2) 供应商地址使用复杂绑定(complex binding)的写法
3) 使用
页面显示第一个供应商的信息,界面如下:
项目文件结构如下:
Application area代码写在app_supplier_info.js中,注意bootstrap中增加了
地址使用的是复杂绑定:
供应商信息使用两个
在地址中,有换行
在控件的class属性中,Panel用sapUiResponsiveMargin,其他控件用sapUiSmallMargin,页面更加美观。
什么是双向绑定
我们先以一个例子来看一看绑定的效果。要实现的功能是将页面上的sap.m.Text和
sap.m.Input控件都绑定到json数据,当改变
sap.m.Inputvalue的时候,
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,页面更加美观。
相关文章推荐
- SAPUI5 (13) - 数据绑定之聚合绑定(aggregation binding)
- SAPUI5 (08) - MVC的Model和数据绑定
- SAPUI5 (14) - 数据绑定之元素绑定(element binding)
- [Silverlight]实现到自定义类型的属性数据绑定
- XmlDataSource使用xmlDataSource.Data属性绑定xml数据时,无法使用缓存
- 一步一步学Silverlight 2系列(11):数据绑定
- 一步一步学Silverlight 2系列(11):数据绑定
- NetAdvantage 2006/UltraChart图表基础属性及数据绑定
- 属性数据绑定
- 将数据绑定EVAL的值作为tag属性的值
- 【整理】Asp.net中<HyperLink>控件中的NavigateUrl属性使用<%#Eval(“id”)%>绑定数据时无效
- (11):Silverlight 2 数据绑定
- Spring Framework 开发参考手册 之四 属性编辑器,数据绑定,校验与BeanWeapper(Bean封装)
- 不能在数据绑定的 DataGridView 控件上设置 ColumnCount 属性
- 通过属性编辑器灵活调整数据控件的绑定字段
- Asp.net中控件中的NavigateUrl属性使用绑定数据时无效
- asp.net 数据绑定到属性、集合、表达式、方法
- asp.net 数据绑定到属性、集合、表达式、方法
- DataGridView 控件中轻松设置DataGridViewComboBoxColumn数据绑定属性。
- (11):Silverlight 2 数据绑定