未显示 Popover 中的绑定内容

Question

我创建了一个在鼠标悬停时通过addEventDelegate 调用的弹出框。 弹出框有一个绑定到我的模型的文本元素。

片段：

<Popover xmlns="sap.m"
    id="myCardPopover"
    showHeader="false"
    contentWidth="260px"
    placement="Bottom">
    <Text id="myCardPopoverText" text="{propertyModel>Tooltip}" />
</Popover>

注册浏览器事件：

attachCardPopoverOnMouseover: function () {
    var rootHBox = this.byId("myReportCardContent");
    rootHBox.addEventDelegate({
        onmouseover: function () {
            this.timeId = setTimeout(() => that.onOpenCardPopover(this), 600);
        },
        onmouseout: function () {
            clearTimeout(this.timeId) || that.onCloseCardPopover(this);
        }
    }, rootHBox);
},

事件监听器：

onOpenCardPopover: function (oControl) {
    this.oCardTooltipPopover.then(function (oPopover) {
        var oContext = oControl.getBindingContext("propertyModel");
        oPopover.setBindingContext(oContext);
        oPopover.openBy(oControl);
    });
},

Popover 本身依赖于从聚合绑定创建的多个控件，并在 onAfterRendering 中创建。

// Fragment required from "sap/ui/core/Fragment"
createCardPopover: function () {
    var oView = this.getView();
    var oRootHBox = this.byId("myReportCardContent");
    if (!this.oCardTooltipPopover) {
        this.oCardTooltipPopover = Fragment.load({
            id: oView.getId(),
            name: "namespace.view.CardPopup"
        }).then(function (oPopover) {
            oRootHBox.addDependent(oPopover);
            return oPopover;
        });
    }
},

当我将鼠标悬停在我的一个控件上时，我只会得到一个空的弹出框。未显示绑定的文本。

但是，当我在 UI5 调试工具中查找创建的弹出框时，绑定似乎正确，并且文本也显示在那里。 DOM 中文本的<span> 元素也是空的。

Answer 1

[...] 从聚合绑定创建的多个控件

使用this.byId("myReportCardContent")，您访问的是模板控件而不是实际呈现的控件。聚合绑定中的template 通常是一个静态控件（即没有传播的模型和上下文），ManagedObject 将为每个数据对象提供clone。 克隆后，父模型和上下文传播到那些克隆，而不是内部模板控件。

因此，如果您将弹出框添加到 模板 (oRootHBox) 的 dependent 聚合中，则没有要传播的上下文。片段定义中的绑定路径仍未解析。

---

如何规避此问题取决于您。有很多方法可以在鼠标悬停时显示一些东西。只是避免在渲染后操作模板。