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

来源：互联网发布：汽车有必要贴膜吗知乎编辑：程序博客网时间：2024/05/17 19:21

数据绑定指将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，页面更加美观。

0 0