Änderungen 1

manifest.json

In der Route für die Details ändert sich das Pattern:

      "pattern": "detail/{invoicePath}",

Detail-View

In den Details zeigen wir jetzt auch Daten an:

<mvc:View
  controllerName="ui5.walkthrough.controller.Detail"
  xmlns="sap.m"
  xmlns:mvc="sap.ui.core.mvc">
  <Page
    title="{i18n>detailPageTitle}">
    <ObjectHeader
      intro="{invoice>ShipperName}"
      title="{invoice>ProductName}"/>
  </Page>
</mvc:View>

Neu: Der Controller für die Details

Die Details müssen noch geladen werden. Damit das funktioniert, wird dem Router eine Callback-Funktion mitgegeben, die aufgerufen werden soll, wenn das Pattern passt:

sap.ui.define([
  "sap/ui/core/mvc/Controller"
], (Controller) => {
  "use strict";

  return Controller.extend("ui5.walkthrough.controller.Detail", {
    onInit() {
      const oRouter = this.getOwnerComponent().getRouter();
      oRouter.getRoute("detailRoute").attachPatternMatched(this.onObjectMatched, this);
    },

    onObjectMatched(oEvent) {
      this.getView().bindElement({
        path: "/" + window.decodeURIComponent(oEvent.getParameter("arguments").invoicePath),
        model: "invoice"
      });
    }
  });
});