如何绑定实例属性？UI5表格中实例属性访问实现方案

我来帮你梳理下怎么正确绑定你的SalesPayer实例属性到Table控件里，主要有两个关键地方需要调整：

1. 修正Table的Items绑定路径 #

你已经把对象数组设置成了命名模型"Sales"，但当前Table的items绑定路径{ path: '/Sales' }是错的——因为你的模型根节点就是这个数组本身，不是嵌套在"/Sales"路径下的。正确的绑定应该明确指定模型名称，路径用根路径/：

<Table id="SalesView" inset="false" items="{ path: '/', model: 'Sales' }">

这样Table就会遍历"Sales"模型里的所有SalesPayer对象了。

2. 直接访问实例属性 #

在ColumnListItem的单元格里，你不需要加Sales.前缀，因为当items绑定了数组后，每个列表项的上下文已经是单个SalesPayer实例了。你只需要直接写实例的属性名就行，比如：

<ColumnListItem>
  <cells>
    <ObjectIdentifier title="{id}"/>
    <Text text="{name}"/>
    <Text text="{netValue}"/>
    <Text text="{currency}"/>
  </cells>
</ColumnListItem>

这里要注意，你的SalesPayer类必须把这些属性设置为公开可枚举的，这样SAPUI5的JSONModel才能正确读取到它们。比如你的构造函数应该是这样的：

// ES5构造函数
function SalesPayer(id, name, netValue, currency) {
  this.id = id;
  this.name = name;
  this.netValue = netValue;
  this.currency = currency;
}

// 或者ES6类
class SalesPayer {
  constructor(id, name, netValue, currency) {
    this.id = id;
    this.name = name;
    this.netValue = netValue;
    this.currency = currency;
  }
}

完整修正后的Table代码 #

把这些调整整合后，你的Table代码应该是这样的：

<Table id="SalesView" inset="false" items="{ path: '/', model: 'Sales' }">
 <headerToolbar>
 <Toolbar>
 <Title text="Statistics" level="H2"/>
 </Toolbar>
 </headerToolbar>
 <columns>
 <Column width="12em">
 <Text text="Payer"/>
 </Column>
 <Column minScreenWidth="Tablet" demandPopin="true">
 <Text text="Name"/>
 </Column>
 <Column minScreenWidth="Tablet" demandPopin="true" hAlign="End">
 <Text text="Net Value"/>
 </Column>
 <Column hAlign="End">
 <Text text="Currency"/>
 </Column>
 </columns>
 <items>
 <ColumnListItem>
 <cells>
 <ObjectIdentifier title="{id}"/>
 <Text text="{name}"/>
 <Text text="{netValue}"/>
 <Text text="{currency}"/>
 </cells>
 </ColumnListItem>
 </items>
</Table>

这样调整后，Table就能正确展示每个SalesPayer实例的属性了。

内容的提问来源于stack exchange，提问作者softshipper