SAPUI5|SAPUI5 (15) - 绝对绑定和相对绑定 SAPUI5(15)-绝对绑定和相对绑定

回顾一下 property binding 的使用方法：

sap.ui.getCore().attachInit(function(){var oData = https://www.it610.com/article/{"company" : { "name": "Acme Inc.", "street": "23 Franklin St.", "city": "Claremont", "state" : "New Hampshire", "zip": "03301", "revenue": "1833990" } }; var oModel = new sap.ui.model.json.JSONModel(); oModel.setData(oData); sap.ui.getCore().setModel(oModel); new sap.m.Input({ value: "{/company/name}" }).placeAt("content"); }); // end of attachInit()

sap.m.Input 控件通过 property binding 将 value 属性绑定到 json model 从根目录开始的路径 company/name。这是绝对绑定的语法。如果我们同时有多个数据要展示，使用绝对绑定应该是这样：

new sap.m.Panel({ headerText: "Company Information", content: [ new sap.m.Label({text: "Company name"}), new sap.m.Input({value: "{/company/name}"}),new sap.m.Label({text: "Company street"}), new sap.m.Input({value: "{/company/street}"}),new sap.m.Label({text: "City"}), new sap.m.Input({value: "{/company/city}"})] }).placeAt("content");

每个控件都独立的用绝对路径绑定到 model。这样写是不是感觉很啰嗦？OpenUI5 提供一种机制，当父控件设置绑定路径设置后，子控件可以基于这个路径使用相对路径。比如将 Panel 控件的绑定路径设为 /company，则子控件都可以基于这个相对路径：

var oPanel = new sap.m.Panel({ content: [ new sap.m.Label({text: "Company name"}), new sap.m.Input({value: "{name}"}), new sap.m.Label({text: "Street"}), new sap.m.Input({value: "{street}"}), new sap.m.Label({text: "City"}), new sap.m.Input({value: "{city}"}), ] }); oPanel.bindElement("/company"); oPanel.placeAt("content");

oPanel.bindElement("/company");

设置了元素绑定的路径，所以 Panel 中的控件就可以基于 /company 这个相对路径进行绑定。相对绑定尤其适用于布局 (layout) 控件或者容器控件。
xml view 的相对绑定
上面的例子如果使用 xml view，方法如下：

设置 Panel 的 binding 属性：binding="{/company}"
【SAPUI5|SAPUI5 (15) - 绝对绑定和相对绑定】Application area 代码：

sap.ui.getCore().attachInit(function(){var oData = https://www.it610.com/article/{"company" : { "name": "Acme Inc.", "street": "23 Franklin St.", "city": "Claremont", "state" : "New Hampshire", "zip": "03301", "revenue": "1833990" } }; var oModel = new sap.ui.model.json.JSONModel(); oModel.setData(oData); sap.ui.getCore().setModel(oModel); jQuery.sap.registerModulePath("bindingtest", "./webapp"); var oView = sap.ui.xmlview({ viewName: "bindingtest.view.relativebinding" }); oView.placeAt("content"); });