XML视图嵌入子视图

Question

我正在尝试构建一个具有多个视图的应用程序。第一个视图显示一个列表和一个“创建”按钮。单击“创建”按钮后，将显示第二个视图。

我希望能够将子视图嵌入到第二个视图中，但是我收到了一个错误。

<mvc:View
  controllerName="openui5.view.Framework"
  xmlns="sap.m"
  xmlns:core="sap.ui.core"
  xmlns:mvc="sap.ui.core.mvc"
>
  <Page id="page"
    title="{i18n>DetailTitle}"
    showNavButton="true"
    navButtonPress=".onBack"
  >
    <Button id="saveButton"
      text="Save"
      type="Accept"
      icon="sap-icon://save"
      press=".onSave"
    />
    <Button id="nextButton"
      text="Next"
      type="Accept"
      icon="sap-icon://action"
      press=".onNext"
    />
    <mvc:XMLView viewName="openui5.view.BasicInformation"/>
  </Page>
</mvc:View>

行<mvc:XMLView viewName="openui5.view.BasicInformation"/>指向另一个定义如下的视图：

<mvc:View
  controllerName="openui5.view.BasicInformation"
  xmlns="sap.m"
  xmlns:mvc="sap.ui.core.mvc"
>
  <Page id="page1"
    title="{i18n>NewPR}"
  >
    <Button id="stuffButton"
      text="Stuff"
      type="Accept"
      icon="sap-icon://save"
      press=".onSave"
    />
  </Page>
</mvc:View>

当我运行应用程序时，我收到错误消息

TypeError：frag未定义。

我可以看到子视图的标题，但没有按钮。我推测是因为上述错误。

在尝试嵌入此子视图时，我是不是在做“特殊”的事情？

Answer 1

我们也使用了子视图的片段，它工作正常，但我发现它有点麻烦，把它放在一个jsfiddle ..但它尝试过，见下文。您不需要在片段周围添加视图标记。您的片段在项目中应该具有名称xx.fragment.xml，并且不需要控制器。那么你应该能够像xml一样在xml视图中直接包含它 另见https://openui5.hana.ondemand.com/#docs/guide/2c677b574ea2486a8d5f5414d15e21c5.html

Answer 2

如前所述，您可以使用对内容的“小部分”有用的片段。其他解决方案包括一个Shell组件，其中包含一个内部页面，然后使用路由机制，因此“子视图”的内容将加载到此shell页面中：

在主视图上：

<Shell id="shellContainer" appWidthLimited="false">
    <App id="appContainer" backgroundOpacity="0"></App>
</Shell>

在manifest.json上：

"targets": {...
"YourSubViewDestination": {
                "viewType": "XML",
                "viewName": "YourSubViewName",
                "controlAggregation": "pages",
                "controlId": "appContainer",
                "parent": "YourMainViewDestination"
            }

...}

在您的创建按钮操作上：

this.getOwnerComponent().getRouter().navTo("YourSubViewDestination", {});

您可能需要一些路由帮助：Routing navigation