导航到不同的 (JS)View - 无法访问路由器

Question

我有一个包含两个磁贴的主页，它按预期工作。单击第一个磁贴时，我的控件应导航到 "SearchProductPage".

我有以下文件：

homepage.view.js
homepage.controller.js
SearchProductPage.view.js
SearchProductPage.controller.js

因此，当我单击磁贴时，我会收到每个代码的警报消息。但是我的代码没有导航到 SearchProductPage.view.js.

并且在尝试访问路由器时，它 returns undefined。

观看次数

`homepage.view.js`

sap.ui.jsview("view.homepage", {
  getControllerName: function() {
   return "Webapp.controller.homepage";
  },
  createContent: function(oController) {
    var oTileSearchProd = new sap.m.StandardTile({
      title: "{i18n>tile_title_1}",
      press: [oController.goToProductSearch, oController]
    });
    var oTileTopRatedProd = new sap.m.StandardTile({
      title: "{i18n>tile_title_2}",
      press: [oController.goToProductAnalytics, oController]
    });
    var oTileCont = new sap.m.TileContainer({
      tiles: [oTileSearchProd, oTileTopRatedProd]
    });
    var oPage = new sap.m.Page({
      title: "{i18n>app_head}",
      enableScrolling: false,
      content: [oTileCont]
    });
    return oPage;
  }
});

控制器

`homepage.controller.js`

sap.ui.controller("Webapp.controller.homepage", {
  onInit: function() {
    var i18nPath = "i18n/i18n.properties";
    var oi18nModel = new sap.ui.model.resource.ResourceModel({
      bundleUrl: i18nPath
    });
    sap.ui.getCore().setModel(oi18nModel, "i18n");
  },

  goToProductSearch: function(oEvt) {
    var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
    oRouter.navTo("idSearchProductPage");
  },

  goToProductAnalytics: function(oEvt) {
    var app = sap.ui.getCore().byId("idProductsAnalyticsPage");
    var oResourceBundle = app.getModel("i18n").getResourceBundle();
    var url = oResourceBundle.getText("LOGIN").toString().trim();
    sap.ui.getCore().setModel(new sap.ui.model.json.JSONModel(url), "barChart");
    var that = this;
    that.getOwnerComponent().getRouter().navTo("idProductsAnalyticsPage");
  }
});

应用描述符（`manifest.json`）

{
  "_version": "1.12.0",
  "sap.app": {
    "id": "Webapp",
    "type": "application",
    "applicationVersion": {
      "version": "1.0.0"
    },
    "title": "{{appTitle}}",
    "description": "{{appDescription}}",
    "sourceTemplate": {
      "id": "servicecatalog.connectivityComponentForManifest",
      "version": "0.0.0"
    }
  },
  "sap.ui": {
    "technology": "UI5"
  },
  "sap.ui5": {
    "rootView": {
      "viewName": "Webapp.view.homepage",
      "type": "JS",
      "async": true,
      "id": "App"
    },
    "routing": {
      "config": {
        "routerClass": "sap.m.routing.Router",
        "viewType": "JS",
        "viewPath": "sap.ui.Webapp.view",
        "controlId": "app",
        "controlAggregation": "pages",
        "transition": "slide"
      },
      "routes": [
        {
          "pattern": "",
          "name": "homepage",
          "target": "homepage"
        },
        {
          "pattern": "SearchProductPage",
          "name": "SearchProductPage",
          "target": "SearchProductPage"
        },
        {
          "pattern": "ProductDetailPage",
          "name": "ProductDetailPage",
          "target": "ProductDetailPage"
        },
        {
          "pattern": "ProductAnalyticsPage",
          "name": "ProductAnalyticsPage",
          "target": "ProductAnalyticsPage"
        },
        {
          "pattern": "SearchProductPage",
          "name": "SearchProductPage",
          "target": "SearchProductPage"
        }
      ],
      "targets": {
        "homepage": {
          "viewName": "homepage"
        },
        "SearchProductPage": {
          "viewName": "SearchProductPage"
        },
        "ProductDetailPage": {
          "viewName": "ProductDetailPage"
        },
        "ProductAnalyticsPage": {
          "viewName": "ProductAnalyticsPage"
        }
      }
    }
  }
}

我的`index.html`

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Divya Demo Project</title>
    <script
      src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js "
      id="sap-ui-bootstrap"
      data-sap-ui-libs="sap.m"
      data-sap-ui-theme="sap_bluecrystal"
      data-sap-ui-resourceroots='{"Webapp":"./"}'
    ></script>
    <script>
      sap.ui.localResources("view");
      var app = new sap.m.App({
        initialPage: "homePage",
      });
      app.addPage(sap.ui.view({
        id: "homePage",
        viewName: "view.homepage",
        type: sap.ui.core.mvc.ViewType.JS,
      }));
      app.addPage(sap.ui.view({
        id: "SearchProductPage",
        viewName: "view.SearchProductPage",
        type: sap.ui.core.mvc.ViewType.JS,
      }));
      app.placeAt("content");
    </script>
  </head>
  <body class="sapUiBody" role="application">
    <div id="content"></div>
  </body>
</html>

这是我的项目。一切都在 JavaScript:

Answer 1

也许你应该先看看文档

https://sapui5.hana.ondemand.com/1.36.6/docs/guide/e5200ee755f344c8aef8efcbab3308fb.html

查看：

 createContent : function(oController) {
        var oTileSearchProd = new sap.m.StandardTile({
        title: "{i18n>tile_title_1}",
        press : [ oController.goToProductSearch, oController]
        }); 
        return new sap.m.Page({
            title: "Title Page 2",
            content: [
                oTileSearchProd 
            ]
        });
    }

和控制器：

goToProductSearch: function()  {
        var router;
        router = sap.ui.core.UIComponent.getRouterFor(this);
        return router.navTo("SearchProductPage", null);
    }

我也会更改路由配置。例如在您的清单中尝试为您构建它

   "routing": {
    "config": {
        "viewType": "JS",
        "viewPath": "sapui5.app53.view",
        "targetControl":"idPageContainer",
        "targetAggregation": "pages",
        "routerClass": "sap.m.routing.Router"
    },
    "routes": [{
        "pattern": "",
        "name": "First",
        "view": "zjs_view_53_02",
        "targetAggregation": "pages"
    }, {
        "pattern": "second",
        "name": "Second",
        "view": "zjs_view_53_03",
        "targetAggregation": "pages"
    }]
}

Answer 2

这是一个带有 JSView 并在点击时导航的示例应用程序：https://embed.plnkr.co/qOnDlm.
（更新：JSView 自 UI5 v1.90 以来已弃用 。请改用 Typed Views。）

主要问题

主要问题是您的应用程序根本没有评估 manifest.json。为了首先获取描述符，您的应用需要使用 sap/ui/core/ComponentContainer 和 UIComponent 以及 metadata: { manifest: "json" }。这些在您的 index.html 中完全缺失。 IE。该应用程序甚至不知道有路由设置。

需要 ComponentContainer，因为没有容器就无法将组件添加到 UI。在 Component.js 中，metadata: { manifest: "json" } 赋值告诉框架获取应用程序描述符 manifest.json，然后将使用所有路由器设置对其进行评估。

ComponentContainer 可以使用 sap/ui/core/ComponentSupport 模块以声明方式添加到 index.html 而无需内联脚本。请参阅链接的 API 参考以进一步了解 guidance。

其他问题

与 guidelines 有更多不一致之处，应该与主要问题一起修复。

_^❌ neo-app.json 在 webapp 文件夹中，而 Component.js 不在。
_^✔️ 对于正确的文件夹结构，请遵循主题 Folder Structure: Where to Put Your Files。 IE。 Component.js 应该在里面，neo-app.json 在 webapp 文件夹外面。

_^❌ 使用已弃用的 API 以及调用没有 requiring 模块的方法
_^✔️ 咨询 API 参考哪些 API 可以使用而不是弃用的。例如。使用 sap.ui.controller 定义控制器应该是 replaced with Controller#extend.
_^✔️先请求ui再sap/ui/core/UIComponent，再调用UIComponent.getRouterFor.

_^❌ 模块名称前缀与基本命名空间不匹配。
_^✔️ 根据guideline正确注册模块，保持general namespace与base[=33一致=]命名空间。

我还看到 homepage 视图也分配给了 sap.ui5/rootView。请.

以下是包含上述要点的一些片段：

鉴于此folder structure..

在index.html:

<头>
  <!-- ... -->
  <script id="sap-ui-bootstrap" src="..."
    data-sap-ui-resourceRoots='{"<strong>myCompany.myApplication</strong>": "./"}'
    数据树液-ui-<strong>oninit="module:sap/ui/core/ComponentSupport"</strong>
    数据-...<脚本>
<头>
<正文 ID="content" class="sapUiBody">
  <div 风格="height: 100%;"
    数据树液-ui-组件
    数据-<strong>名称="myCompany.myApplication"</strong>
    数据高度=“100%”>
  </div>
</body>

在Component.js中：

return UIComponent.extend("<strong>myCompany.myApplication</strong>", {
  元数据：{
    清单："json"
  },
  初始化：函数（）{
    UIComponent.prototype.apply（这个，参数）；
    <strong>this.getRouter().initialize();</strong>
  },
});

在manifest.json、"sap.ui5"中：

{
  "rootView"：{
    "viewName": "<strong>myCompany.myApplication</strong>.view.<em><strong>不是</strong>主页</em>",
    “……”：“……”
  },
  "routing"：{
    "config"：{
    "viewPath": "<strong>myCompany.myApplication</strong>.view",
    “……”：“……”
  },
  "routes": [
    {
      "pattern": "",
      "name": "homepage",
      "target": "homepage"
    },
    “……”
  ],
  “……”：“……”
}

在控制器中

sap.ui.define([ // 例如控制器/<strong>H</strong>omepage.controller.js
  "sap/ui/core/mvc/Controller",
  // ...,
  "sap/ui/core/UIComponent"
], function(Controller, /*...,*/ UIComponent) {
  "use strict";
  // 1. 停止使用已弃用的 sap.ui.controller。
  // 2. 约定：class name 应该是驼峰式的，以大写字母开头（<strong>H</strong>omepage）。
  // 这同样适用于所有其他控制器和视图。
  return Controller.extend("<strong>myCompany.myApplication</strong>.controller.<strong>H</strong>主页", {
    goToProductSearch：函数（oEvt）{
      const router = UIComponent.getRouterFor(this); // 或者没有 requiring UIComponent: this.getOwnerComponent().getRouter();
    },
    // ...
  });
});

在 JS 视图中：

sap.ui.jsview("<strong>myCompany.myApplication</strong>.view.<strong>H</strong>主页", { // 例如视图/<strong>H</strong>omepage.view.js
  获取控制器名称：函数（）{
    return "<strong>myCompany.myApplication</strong>.controller.<strong>H</strong>主页";
  },
  // ...
});

^{更新：sap.ui.jsview 现已完全弃用。请改用 Typed Views！}

由于项目比较小，建议使用基本的SAPUI5模板重新开始：

.

导航到不同的 (JS)View - 无法访问路由器

Navigating to a different (JS)View - Unable to access Router

sapui5

观看次数

homepage.view.js

控制器

homepage.controller.js