MessagePopover片段中的动态链接未显示

问题描述 投票:1回答:1

我一直在开发一个使用模型存储通知的UI5应用程序。我想在MessagePopover中显示这些通知,可以使用页脚触发。

数据绑定完美无缺。我可以看到所有属性都已设置并匹配模型内的数据。但是细节页面中的链接没有显示出来。

当我使用不使用数据绑定的静态链接(即google.com的静态链接)时,将呈现链接。

你有没有人遇到同样的问题并有解决方案吗?

这是我的代码:

sap.ui.define([
  "sap/ui/core/mvc/Controller"
], function(BaseController) {
  return BaseController.extend("test.Test", {
        onShowNotificationPopover: function(oEvent){
            if (!this._notificationPopover) {
                var oMessageTemplate = new sap.m.MessageItem({
                    type : '{data>type}',
                    title : '{data>title}',
                    subtitle : "{data>subtitle}",
                    description : '{data>description}',
                    markupDescription : "{data>markupDescription}",
                    groupName : "{data>groupName}"
                });
                var oLink = new sap.m.Link({
                    text : "{data>link/text}",
                    href : "{data>link/url}",
                    target : "_blank"
                });
                /* Working with static */
                // oLink = new sap.m.Link({text: "Google", href: "http://google.com", target: "_blank"})
                oMessageTemplate.setLink(oLink);

                var oPopover = new sap.m.MessagePopover();
                oPopover.bindAggregation("items",{
                    template: oMessageTemplate,
                    path: "data>/notifications"
                });
                this._notificationPopover = oPopover; 
                this.getView().addDependent(this._notificationPopover);
            }
            this._notificationPopover.toggle(oEvent.getSource());
        }
    });

});

该视图包含以下内容:

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns:f="sap.f" xmlns="sap.m" controllerName="test.Test">
    <f:DynamicPage showFooter="true">
        <f:footer>
            <OverflowToolbar>
                <Button icon="sap-icon://message-popup" type="Emphasized"
                    press="onShowNotificationPopover" />
            </OverflowToolbar>
        </f:footer>
    </f:DynamicPage>
</mvc:View>

和index.html

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

    <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
            id="sap-ui-bootstrap"
            data-sap-ui-libs="sap.m, sap.f"
            data-sap-ui-theme="sap_belize"
            data-sap-ui-bindingSyntax="complex"
            data-sap-ui-resourceroots='{ 
                "test": "."
            }'
            >
    </script>
    <script>
        sap.ui.getCore().attachInit(function() {
            var oModel = new sap.ui.model.json.JSONModel();
            oModel.setData({
                notifications: [{
                    type: "Error",
                    title: "Title1",
                    subtitle: "Subtitle",
                    description: "This is a description and below you should see a link",
                    markupDescription: false,
                    groupName: "notification",
                    link: {
                        text: "Click here",
                        url: "http://www.google.com"
                    }
                }]
            });
            var oView = sap.ui.xmlview("test.Test");
            oView.setModel(oModel, "data");
            oView.placeAt("content");
        });
    </script>
</head>
<body class="sapUiBody" role="application">
    <div id="content"></div>
</body>
</html>

Example: Popover with dynamic link

Example: Popover with static link

sapui5
1个回答
1
投票

我找到了解决问题的方法:MessagePopover的事件itemPress

控制器内的事件处理程序:

onNotificationItemSelect: function(oEvent){
    var oItem = oEvent.getParameter("item"), oBindingContext = oItem.getBindingContext("data");
    var oData = oBindingContext.getModel().getProperty(oBindingContext.getPath());
    oItem.getLink().setText(oData.link.text);
    oItem.getLink().setHref(oData.link.url);
}

你必须注册它:

var oPopover = new sap.m.MessagePopover({
    itemSelect: this.onNotificationItemSelect
});

附加信息

使用时显示弹出窗口的内容

console.log(oPopover.getItems()[0].getLink())

显示正确的属性。 see here

但是当您搜索DOM时,您可以看到链接已复制,并且不包含所需的绑定。 see here

© www.soinside.com 2019 - 2024. All rights reserved.