导航到其他（JS）视图-无法访问路由器

问题描述 投票：2回答：2

我有一个包含两个图块的首页，该图可以正常工作。单击第一个图块时，我的控件应导航到“ SearchProductPage”。

我有以下文件：

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

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

并且当尝试访问路由器时，它返回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中：

My project folder

sapui5
2个回答
3
投票

这里是带有JSView并在单击时导航的示例应用程序：https://embed.plnkr.co/qOnDlm。

主要问题

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

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

ComponentContainer可以使用index.html模块声明性地添加到sap/ui/core/ComponentSupport中，而无需使用内联脚本。请参阅链接的API参考以获取更多指导。

其他问题

与指南存在更多不一致之处，应与主要问题一并解决。

❌ sap/ui/core/ComponentSupport在webapp文件夹中，而neo-app.json不在。✔️有关正确的文件夹结构，请遵循主题[[Component.js。即Folder Structure: Where to Put Your Files应该位于内部，Component.js应该位于neo-app.json文件夹之外。

❌使用不推荐使用的API以及调用方法而无需模块✔️查阅API参考，以使用哪些API代替不推荐使用的API。例如。使用webapp定义控制器应为sap.ui.controller。✔️首先需要replaced with Controller#extend，然后调用Controller#extend。

❌

模块名称前缀与基本名称空间不匹配。✔️为了根据指南正确地进行模块注册，请使sap/ui/core/UIComponent与基本UIComponent.getRouterFor命名空间保持一致。此外，我也看到general namespace视图也被分配给resourceRoot。请homepage。

以下是包含上述要点的摘要：

    鉴于此sap.ui5/rootView ..
  1. 在avoid that中：
  2. folder structure
    3. 在index.html中：
  3. <!-- ... --> <script id="sap-ui-bootstrap" src="..." data-sap-ui-resourceRoots='{"myCompany.myApplication": "./"}' data-sap-ui-oninit="module:sap/ui/core/ComponentSupport" data-...> <script> <head> <body id="content" class="sapUiBody"> <div style="height: 100%;" data-sap-ui-component data-name="myCompany.myApplication" data-height="100%"> </div> </body>
    4. 在Component.js中，return UIComponent.extend("myCompany.myApplication", {
  metadata: {
    manifest: "json"
  },
  init: function() {
    UIComponent.prototype.apply(this, arguments);
    this.getRouter().initialize();
  },
});：
  4. manifest.json
    5. 在控制器中
  5. "sap.ui5"
    6. 在JS视图中：
  6. "rootView": { "viewName": "myCompany.myApplication.view.NotHomepage", "...": "..." }, "routing": { "config": { "viewPath": "myCompany.myApplication.view", "...": "..." }, "routes": [ { "pattern": "", "name": "homepage", "target": "homepage" }, "..." ], "...": "..." }
由于该项目似乎相对较小，我建议使用基本的SAPUI5模板重新开始：
sap.ui.define([ // e.g. controller/Homepage.controller.js
  "sap/ui/core/mvc/Controller",
  // ...,
  "sap/ui/core/UIComponent"
], function(Controller, /*...,*/ UIComponent) {
  "use strict";
  // 1. Stop using the deprecated sap.ui.controller.
  // 2. Convention: class name should be camel-case, starting with a capital letter (Homepage).
  //    The same applies to all the other controllers and views.
  return Controller.extend("myCompany.myApplication.controller.Homepage", {
    goToProductSearch: function(oEvt) {
      const router = UIComponent.getRouterFor(this);
      // or without requiring UIComponent: this.getOwnerComponent().getRouter();
    },
    // ...
  });
});。
0
投票
也许您应该先看一下文档

sap.ui.jsview("myCompany.myApplication.view.Homepage", { // e.g. view/Homepage.view.js getControllerName: function() { return "myCompany.myApplication.controller.Homepage"; }, // ... });

视图：

basic SAPUI5 template

和控制器：
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 
            ]
        });
    }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.