【问题标题】:Navigating to a different (JS)View - Unable to access Router导航到不同的 (JS) 视图 - 无法访问路由器
【发布时间】:2020-03-23 12:56:34
【问题描述】:

我的主页有两个按预期工作的图块。单击图块一时,我的控件应导航到“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 中:

【问题讨论】:

    标签: sapui5


    【解决方案1】:

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

    主要问题

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

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

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

    其他问题

    指南中存在更多不一致之处,也应与主要问题一起修复。

    neo-app.json 在 webapp 文件夹中,而 Component.js 不在。
    ✔️ 对于正确的文件夹结构,请关注主题 Folder Structure: Where to Put Your Files。 IE。 Component.js 应该在里面,neo-app.jsonwebapp 文件夹之外。

    使用已弃用的 API 以及调用方法而不需要模块
    ✔️ 请参阅 API 参考使用哪些 API 而不是已弃用的 API。例如。使用sap.ui.controller 定义控制器应该是replaced with Controller#extend
    ✔️ 首先需要sap/ui/core/UIComponent,然后调用UIComponent.getRouterFor

    模块名称前缀与基本命名空间不匹配。
    ✔️准则,保持general namespace 与基本resourceRoot 命名空间一致。

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


    以下是一些包含上述几点的sn-ps:

    1. 鉴于此folder structure..

    2. index.html:

      <head>
        <!-- ... -->
        <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>
    3. Component.js

      return UIComponent.extend("myCompany.myApplication", {
        metadata: {
          manifest: "json"
        },
        init: function() {
          UIComponent.prototype.apply(this, arguments);
          this.getRouter().initialize();
        },
      });
    4. manifest.json"sap.ui5"

      {
        "rootView": {
          "viewName": "myCompany.myApplication.view.NotHomepage",
          "...": "..."
        },
        "routing": {
          "config": {
          "viewPath": "myCompany.myApplication.view",
          "...": "..."
        },
        "routes": [
          {
            "pattern": "",
            "name": "homepage",
            "target": "homepage"
          },
          "..."
        ],
        "...": "..."
      }
    5. 在控制器中

      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();
          },
          // ...
        });
      });
    6. 在 JS 视图中:

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

      更新:sap.ui.jsview 现已完全弃用。请改用Typed Views

    由于项目看起来比较小,我建议使用基本的 SAPUI5 模板重新开始:

    .

    【讨论】:

    • 感谢 Boghyon,我可以看到我的错误。正如建议的那样,我将 manifest.json 移到了 Webapp 内部,并将 neo json 移到了 Webapp 之外。我还在 index.html 中包含了组件容器。所以我的根资源是 Webapp。我仍然看到我的代码无法显示。 “无法从“Webapp/manifest.json”加载组件清单。
    • @Winona 没有代码很难从这里调试。尝试将您的代码与我在答案中给出的sample plunk 进行比较,并一一解决。
    • @Winona 我强烈建议遵循演示工具包提供的学习路径:openui5.hana.ondemand.com/topic/…,尤其是演练。它解决了我在回答中提到的所有基本规则。
    【解决方案2】:

    也许你应该先看看文档

    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"
        }]
    }
    

    【讨论】:

    • 我正在关注该链接。我的项目中实际上有 4 页。我的主页有两个图块。单击每个应导航到相应的页面。我已经在我的 manifest.json 中的路由器中添加了所有这些。编辑器-> 路由。这是我的 component.js sap.ui.define([ "sap/ui/core/UIComponent", "sap/ui/model/json/JSONModel" ], function (UIComponent, JSONModel) { "use strict"; return UIComponent .extend("homepage.view", { metadata: { manifest: "json" }, init: function () { UIComponent.prototype.init.apply(this, arguments);this.getRouter().initialize();
    • alles ,我尝试了上面的代码,我认为我无法添加 return new ,它给出了错误。但是我能够在控制器中添加返回路由器,但仍然得到“TypeError:sap.ui.core.UIComponent.getRouterFor 不是函数”。
    • 您需要更改清单路由。我发布了一个我找到的示例。似乎合法
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-07-27
    • 2016-10-29
    • 2021-03-05
    • 1970-01-01
    相关资源
    最近更新 更多