共计 2982 个字符,预计需要花费 8 分钟才能阅读完成。
元素绑定 (element binding) 容许咱们将元素绑定到模型数据中的特定对象,这将创立绑定上下文 (binding context) 并容许控件及其所有子项中的 绝对绑定
。这在 master-detail 场景中特地有用。
假如咱们有以下 JSON 数据:
{
"company" : {
"name" : "Acme Inc."
"street": "23 Franklin St."
"city" : "Claremont”"state":"New Hampshire”"zip”:"03301""revenue": "1833990"
}
}
element binding 的语法:
<mvc:View
controllerName="sap.ui.sample.App"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Input id="companyInput"
binding="{/company}"
value="{name}"
tooltip="The name of the company is'{name}'"/>
</mvc:View>
其中这段代码实际上定义了绑定上下文:
binding="{/company}"
这样 value 属性能够间接绑定到 json 模型 company 中的相对路径字段比方 name 下来。
如果不采纳 element binding,咱们须要应用绝对路径作为绑定门路,即应用符号 / 结尾的绝对路径语法:
<mvc:View
controllerName="sap.ui.sample.App"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Input id="companyInput"
value="{/company/name}"
tooltip="The name of the company is'{/company/name}'}"/>
</mvc:View>
JavaScript 代码实现 element binding:
var oInput = this.byId("companyInput")
oInput.bindElement("/company");
oInput.bindProperty("value", "name");
element binding 的利用场合
当一个 UI 界面的不同字段,其数据源从逻辑意义上说来自同一数据模型的同一层级时,element binding 特地有用:
<mvc:View
controllerName="sap.ui.sample.App"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<l:VerticalLayout id="vLayout"
binding="{/company}"
width="100%">
<Text text="{name}" />
<Text text="{city}" />
<Text text="{county}" />
</l:VerticalLayout>
</mvc:View>
如何创立一个新的 binding context
看个例子,咱们有如下的 json 文件:
{
companies : [
{
name : "Acme Inc.",
city: "Belmont",
state: "NH",
county: "Belknap",
revenue : 123214125.34
},{
name : "Beam Hdg.",
city: "Hancock",
state: "NH",
county: "Belknap"
revenue : 3235235235.23
},{
name : "Carot Ltd.",
city: "Cheshire",
state: "NH",
county: "Sullivan",
revenue : "Not Disclosed"
}]
}
有这样一个 input field:
<mvc:View
controllerName="sap.ui.sample.App"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Input id="companyInput"
value="{name}"/>
</mvc:View>
如何设置绑定上下文:
var oInput = this.byId("companyInput");
oInput.bindElement("/companies/0");
XML 视图已将输出值绑定到模型中的 name 属性。因为未设置模型中此属性的门路,因而无奈 resolve. 要解析绑定,您能够应用 bindElement 办法从指定的相对路径创立一个新的上下文。
若要删除以后绑定上下文,请在输出控件上调用 unbindElement 办法。通过这样做,所有绑定当初再次绝对于父上下文解析。
您还能够将 bindElement 办法与聚合绑定联合应用。让咱们思考 JSON 数据的以下扩大:
{
regions: [
{
name: "Americas",
companies : [
{
name : "Acme Inc.",
zip : "03301",
city: "Belmont",
county: "Belknap",
state: "NH",
revenue : 123214125.34,
publ: true
},
{
name : "Beam Hdg.",
zip : "03451",
city: "Hancock",
county: "Sullivan",
state: "NH",
revenue : 3235235235.23,
publ: true
},
{
name : "Carot Ltd.",
zip : "03251",
city: "Cheshire",
county: "Sullivan",
state: "NH",
revenue : "Not Disclosed",
publ: false
}]
},{
name: "DACH",
companies : [
{
name : "Taubtrueb",
zip : "89234",
city: "Ginst",
county: "Musenhain",
state: "NRW",
revenue : 2525,
publ: true
},
{
name : "Krawehl",
zip : "45362",
city: "Schlonz",
county: "Humpf",
state: "BW",
revenue : 2342525,
publ: true
}]
}
]
}
如上 json 文件所示,regions 里蕴含了一个 companies 列表。
<mvc:View
controllerName="sap.ui.sample.App"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<List id=”companyList”items="{companies}">
<items>
<StandardListItem
title="{name}"
description="{city}"
/>
</items>
</List>
</mvc:View>
上面这行语句无奈间接被解析,因为这是一个相对路径。
items="{companies}"
咱们须要在控制器里应用 element binding:
var oList = this.byId("companyList");
oList.bindElement("/regions/0");
这样,regions 数组里第一个元素,America,蕴含的所有 companies 就可能正确显示了。