路由视图加载

Question

我目前正在尝试学习 UI5 和路由的概念。我当前的用例是，用户从一组单选按钮中选择一个，然后按下一个按钮。在我的第二个视图中，它应该显示选定的单选按钮。

我已经设置了视图、路线和目标。但它不知何故不想加载视图。如果我查看 URL，它会将路线模式输入其中，但不会加载视图 - 我需要做什么吗？

路由器在 component.js
单击按钮后，将调用以下方法：

this.getOwnerComponent().getRouter().navTo("overview");

这是我的路由配置：

        "flexEnabled": false,
        "rootView": {
            "viewName": "com.enh.ess.com.enh.ess.view.Booking",
            "type": "XML",
            "async": true,
            "id": "Booking"
        },
        // some stuff in between 
        "routing": {
            "config": {
                "routerClass": "sap.m.routing.Router",
                "viewType": "XML",
                "async": true,
                "viewPath": "com.ess.view",
                "controlAggregation": "pages",
                "controlId": "app",
                "clearControlAggregation": false,
                "bypassed": {
                    "target": "noFound"
                }
            },
            "routes": [
                {
                    "name": "home",
                    "pattern": "",
                    "target": "booking_tar"
                },
                {
                    "name": "overview",
                    "pattern": "overviewBooking",
                    "target": "Overview"
                }
            ],
            "targets": {
                "booking_tar": {
                    "viewType": "XML",
                    "transition": "slide",
                    "viewId": "Booking",
                    "viewName": "Booking"
                },
                "Overview": {
                    "viewType": "XML",
                    "viewName": "Overview"
                },
                "notFound": {
                    "viewId": "notFound",
                    "viewType": "XML",
                    "viewName": "NotFound",
                    "transition": "show"
                }
            }
        }

我的 rootView ( Booking.view.xml ) 是这样构建的（我在这里删除了一些东西，比如按钮的属性或 contrllerName 的路径 - 我为按钮添加了一个“注释” ):


<mvc:View controllerName="" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m" xmlns:layout="sap.ui.layout">
    <Shell id="shell">
        <App id="app">
            <pages>
                <Page id="page" title="{i18n>title}">
                    <content>
                        <layout:VerticalLayout>
                            <RadioButtonGroup id="" columns="1"/>
                            <layout:HorizontalLayout>
                                <Button /> <-- when this button gets clicked it should load the new view
                                <Button /> 
                            </layout:HorizontalLayout>
                        </layout:VerticalLayout>
                    </content>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>

在我看来 Booking.view.xml 我有按钮。单击它后，它应该导航到概览目标 / Overview.viewl.xml - 正如我所说，它会将值写入 URL，但不会加载视图。

你知道我还需要做什么吗？我已经尝试了一些东西（比如视图级别，但没有用）

我目前正在 WebIDE 中工作 - 如果这与此相关。

谢谢！

Answer 1

我建议您对XML“封装”使用不同的策略以更好地利用路由机制：创建一个（几乎）空的根视图，例如App.view.xml，如下所示：

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" displayBlock="true">
  <App id="idAppControl">
    <pages>
      <!-- Routed views are added here -->
    </pages>
  </App>
</mvc:View>

相应地修改您的清单

在/sap.ui5/rootView中：

{
  "viewName": "your.namespace.view.App",
  "type": "XML",
  "async": true
},

并在 /sap.ui5/routing/config 中：

{
  "routerClass": "sap.m.routing.Router",
  "viewType": "XML",
  "async": true,
  "viewPath": "your.namespace.view",
  "controlAggregation": "pages",
  "controlId": "idAppControl"
},

请注意 controlId 和 <App> 的 ID 必须相同。现在你已经为你的路线准备了“容器”，你的视图可以简化如下：

<mvc:View controllerName="your.namespace.controller.Booking"
  xmlns="sap.m"
  xmlns:mvc="sap.ui.core.mvc">
  <Page title="title" class="sapUiResponsiveContentPadding">
    <content>
      <!-- Your content here -->
    </content>
  </Page>
</mvc:View>

您的详细信息页面也采用相同的结构。请记住，您的 Home 页面应该有一个空的路由模式 ("pattern" : "") 以便成为第一个点击路由。

要了解更多信息，请查看教程 Navigation and Routing。

路由视图加载

Routing View Loading

sapui5