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