时间戳

首页 > 解决方案 > 在 SAPUI5 中使用参数路由时遇到问题

sapui5 - 在 SAPUI5 中使用参数路由时遇到问题

问题描述

我试图在下一页（视图）上单击时在列表中显示特定项目的数据 这Overview.view.xml是默认视图，其中可单击列表连接到 oData 模型。接下来是概览导航到下一页的控制器，即Overview.controller.js。下一页是Detail.view.xml 我想在此页面中显示单击项目的详细信息。

    #Overview.view.xml
    <mvc:View controllerName="root.demo.controller.Overview" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
    displayBlock="true" xmlns="sap.m">
    <App >
        <pages>
            <Page title="{i18n>title}">
                <content>
                    <List headerText="list" class="sapUiResponsiveMargin" width="auto" items="{HANA>/person}">
                        <items>
                            <ObjectListItem title="{HANA>ID} x {HANA>FIRSTNAME}" type="Navigation" press="onPress"/>
                        </items>
                    </List>
                </content>
            </Page>
        </pages>
    </App>
</mvc:View>



    #Overview.controller.js
        sap.ui.define([
    "sap/ui/core/mvc/Controller"
    ], function (Controller) {
    "use strict";

    return Controller.extend("root.demo.controller.App", {
        onPress: function (oEvent) {


            var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
            oRouter.navTo("detail");



        }
    });
     });


    #Detail.view.xml
    <mvc:View xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc">
    <Page title="{i18n>detailPageTitle}">
        <ObjectStatus  title="PAGE 1"

        />
    </Page>
</mvc:View>

标签： sapui5

解决方案

如果您有不同的关联实体集，您需要将关联的键发送到第二个视图，并在那里创建与关联实体集的绑定

如果不是，您需要将对象发送到第二个视图

无论哪种方式，您都需要使用参数导航

在清单文件中，您需要指定路由

"routes": [
                {
                    "name": "TargetMaster",
                    "pattern": "RouteMaster",
                    "target": [
                        "TargetMaster"
                    ]
                },
                {
                    "pattern": "Detail/{storePath}",
                    "name": "Detail",
                    "target": "Detail"
                }
            ],
            "targets": {
                "TargetMaster": {
                    "viewType": "XML",
                    "transition": "slide",
                    "clearControlAggregation": false,
                    "viewName": "Master"
                },
                "Detail": {
                    "viewType": "XML",
                    "viewName": "Detail"
                }
            }

在概览控制器中，您需要创建导航类似于

onListItemPress: function(oEvent){
            var oItem = oEvent.getSource();
            var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
            oRouter.navTo("Detail",{
                storePath: oItem.getBindingContext().getProperty("Store")   
            });
        }

您可以在此处找到有关官方文档的更多信息

推荐阅读