元素绑定(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 就可能正确显示了。