使用 bindElement 填充时，弹出窗口中的 SAPUI5 sap.m.list 为空答案

【问题标题】：SAPUI5 sap.m.list in a popover is emtpy when populated using bindElement使用 bindElement 填充时，弹出窗口中的 SAPUI5 sap.m.list 为空
【发布时间】：2020-11-30 20:30:34
【问题描述】：

我有一个包含不同列的表 (sap.m.table)。一个列包含一个链接，当用户单击该链接时，会打开一个弹出片段并在列表 (sap.m.list) 中显示一些详细信息。数据来自 oData 服务。一个实体提供表格，并通过导航属性获取弹出框的数据。

我有一个适用于这种情况的工作示例，我在控制器中创建列表模板。但我相信这也应该可以通过控制器中的 xml 和 bindElement 来实现。我的第二种情况有什么错误？

第一个场景（工作正常）：弹出框 XML：

    <Popover
    showHeader="false"
    contentWidth="320px"
    contentHeight="300px"
    placement="Bottom"
    ariaLabelledBy="master-title">
        <Page
            id="master"
            class="sapUiResponsivePadding--header"
            title="Aktionen">
            <List
                id="AktionList">                    
            </List>
        </Page>
</Popover>

在控制器文件中调用Popover（sPath为/TableEntity('123456')/AktionSet）：

if (!this._oPopover) {
Fragment.load({
    id: "popoverNavCon",
    name: "bernmobil.ZPM_STOERUNG_FDA.view.AktionPopover",
    controller: this
}).then(function(oPopover){
    this._oPopover = oPopover;
    this.getView().addDependent(this._oPopover);
    
    var oList = Fragment.byId("popoverNavCon", "AktionList");
    var oItemTemplate = this._BuildItemTemplate();
    oList.bindAggregation("items", sPath, oItemTemplate);
    this._oPopover.openBy(oControl);
  }.bind(this));
} else {
    var oList = Fragment.byId("popoverNavCon", "AktionList");
    var oItemTemplate = this._BuildItemTemplate();
        oList.bindAggregation("items", sPath, oItemTemplate);
    this._oPopover.openBy(oControl);
}
_BuildItemTemplate: function(){
        var oItemTemplate = new sap.m.ObjectListItem({
            title:"{AktionsBez}", 
            type: "Inactive"              
        });
        
        oItemTemplate.addAttribute(new sap.m.ObjectAttribute({
            text : "{Aktionstext}"
        }));
        oItemTemplate.addAttribute(new sap.m.ObjectAttribute({
            text : "{path: 'ChangedAt', type: 'sap.ui.model.type.DateTime'}"
        }));
        return oItemTemplate;       
    }

这就是调用 oDataService 但不显示任何数据的第二种情况的想法： ObjectListItem 不仅在 XML 中定义，而且在 XML 中定义：

<List
    id="AktionList"
    items="{AktionSet}"> 
    <ObjectListItem 
        title="{AktionsBez}"
        type="Active">
        <ObjectAttribute text="{Aktionstext}" />
        <ObjectAttribute text="{ChangedAt}" />
    </ObjectListItem>
</List>

并且在控制器中，而不是构建模板并执行 bindAggregation 只是：

var oList = Fragment.byId("popoverNavCon", "AktionList");
oList.bindElement(sPath);

如何获得在列表中显示数据的第二种方案？

【问题讨论】：

可能sPath不对，应该是"/AktionSet"

标签： sapui5 popover

【解决方案1】：

我建议第三种解决方案：

按下表格行时，使用oContext = oClickedRow.getBindingContext() 或类似的东西获取当前行的绑定上下文。这个上下文应该指向/TableEntity('123456')。

使用oPopover.setBindingContext(oContext) 将此上下文应用于您的Popover。

现在您的Popover 与您的表格行具有相同的上下文。 XML 应该类似于您的第二种情况。

使用路径是一个额外的步骤。我认为绑定完整的Popover 而不仅仅是List 也更有意义。具有简洁的副作用，您可以使用TableEntity 的属性作为Popover 的标题。它还完全避免直接使用控件（这是七大罪之一），您应该能够删除所有这些 ID。

【讨论】：

按照你的建议做了，它工作得很好，我可以摆脱片段中的 ID。你能解释一下为什么当我执行 setBindingContext 并且列表项指向 (AktionSet} 时导航属性有效吗？这是因为相对绑定 {AktionSet} (没有 /) 并且根是 /TableEntity('123456')绑定上下文？
你能告诉我更多关于使用 ID 的致命罪行的信息吗？我知道它会产生问题，但从未将其视为如此糟糕的做法。
是的，这就是绑定的工作原理。如果您提供相对路径（无斜线），它将检查是否有周围的上下文并将相对路径附加到该上下文。
我认为 ID 在 XML 和 JS 之间建立了紧密的联系，这是不必要的。这使得代码的可重用性降低。这也使重构更加困难。你的清单变成了一张桌子？您还必须将您的 ID 重命名为 AktionTable。我在今年的 UI5Con 上听到了一个有趣的演讲，基本上所有事情都可以在没有 ID 的情况下完成，它使你的代码更易于维护。

【解决方案2】：

以下是视图相关部分的外观：

<List
    id="AktionList"
    items="{AktionSet}"> 
    <dependents>
        <ObjectListItem 
            id="oObjectListItem"
            title="{AktionsBez}"
            type="Active">
            <ObjectAttribute text="{Aktionstext}" />
            <ObjectAttribute text="{ChangedAt}" />
        </ObjectListItem>
    </dependents>
</List>

在控制器中：

var oList = sap.ui.core.Fragment.byId(this.getView().createId("popoverNavCon"), "AktionList");
oList.bindItems({
    path: sPath,
    template: sap.ui.core.Fragment.byId(this.getView().createId("popoverNavCon"), "oObjectListItem")
});

查看sap.m.List aggregation部分中的dependents了解详情。

【讨论】：