导航到不同的 (JS) 视图 - 无法访问路由器 [英] Navigating to a different (JS)View - Unable to access Router
问题描述
我有一个主页，上面有两个按预期工作的磁贴.单击磁贴一后，我的控件应导航到SearchProductPage".
我有以下文件:
homepage.view.jshomepage.controller.jsSearchProductPage.view.jsSearchProductPage.controller.js
因此，当我单击磁贴时，我会收到每个代码的警报消息.但我的代码没有导航到 SearchProductPage.view.js.
当尝试访问路由器时，它返回undefined.
观看次数
homepage.view.js
sap.ui.jsview("view.homepage", {获取控制器名称:函数(){return "Webapp.controller.homepage";},创建内容:功能(oController){var oTileSearchProd = new sap.m.StandardTile({标题:{i18n>tile_title_1}"，按:[oController.goToProductSearch, oController]});var oTileTopRatedProd = new sap.m.StandardTile({标题:{i18n>tile_title_2}"，按:[oController.goToProductAnalytics, oController]});var oTileCont = new sap.m.TileContainer({瓷砖:[oTileSearchProd，oTileTopRatedProd]});var oPage = new sap.m.Page({title: "{i18n>app_head}",启用滚动:假，内容:[oTileCont]});返回页面；}});控制器
homepage.controller.js
sap.ui.controller("Webapp.controller.homepage", {onInit:函数(){var i18nPath = "i18n/i18n.properties";var oi18nModel = new sap.ui.model.resource.ResourceModel({bundleUrl: i18nPath});sap.ui.getCore().setModel(oi18nModel, "i18n");},goToProductSearch:功能(oEvt){var oRouter = sap.ui.core.UIComponent.getRouterFor(this);oRouter.navTo("idSearchProductPage");},goToProductAnalytics:函数(oEvt){var app = sap.ui.getCore().byId("idProductsAnalyticsPage");var oResourceBundle = app.getModel("i18n").getResourceBundle();var url = oResourceBundle.getText("登录").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","类型": "应用程序",应用程序版本":{版本":1.0.0"},"title": "{{appTitle}}","description": "{{appDescription}}",源模板":{"id": "servicecatalog.connectivityComponentForManifest",版本":0.0.0"}},sap.ui":{技术":UI5"},sap.ui5":{根视图":{"viewName": "Webapp.view.homepage","类型": "JS",异步":真，"id": "应用程序"},路由":{配置":{"routerClass": "sap.m.routing.Router","viewType": "JS","viewPath": "sap.ui.Webapp.view","controlId": "应用程序","controlAggregation": "页面",过渡":幻灯片"},路线":[{图案": ""，"name": "主页",目标":主页"},{"pattern": "SearchProductPage","name": "SearchProductPage",目标":搜索产品页面"},{"pattern": "ProductDetailPage","name": "ProductDetailPage",目标":产品详细信息页面"},{"pattern": "ProductAnalyticsPage","name": "ProductAnalyticsPage",目标":产品分析页面"},{"pattern": "SearchProductPage","name": "SearchProductPage",目标":搜索产品页面"}],目标":{主页": {"viewName": "主页"},搜索产品页面":{"viewName": "搜索产品页面"},产品详细信息页面":{"viewName": "ProductDetailPage"},产品分析页面":{"viewName": "ProductAnalyticsPage"}}}}}我的index.html
<头><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/><title>Divya 演示项目</title><脚本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":"./"}'></脚本><脚本>sap.ui.localResources("查看");var app = new sap.m.App({initialPage: "主页",});app.addPage(sap.ui.view({id: "主页",viewName: "view.homepage",类型:sap.ui.core.mvc.ViewType.JS，}));app.addPage(sap.ui.view({id: "SearchProductPage",viewName: "view.SearchProductPage",类型:sap.ui.core.mvc.ViewType.JS，}));app.placeAt("内容");<body class="sapUiBody" role="应用程序"><div id="内容"></div></html>这是我的项目.一切都在 JavaScript 中:
这里是一个带有 JSView 和点击导航的示例应用:.
I have a homepage with two tiles which is working as expected. On clicking tile one, my control should navigate to "SearchProductPage".
I have the following files:
homepage.view.jshomepage.controller.jsSearchProductPage.view.jsSearchProductPage.controller.js
So when I click on the tile, I get the alert messages per code. But my code is not navigating to the SearchProductPage.view.js.
And when trying to access the router, it returns undefined.
Views
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;
}
});
Controllers
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");
}
});
App Descriptor (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"
}
}
}
}
}
My 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>
This is my project. everything is in JavaScript:
Here is a sample app with JSView and navigating on click: https://embed.plnkr.co/qOnDlm.
(Update: JSView is deprecated since UI5 v1.90. Use Typed Views instead.)
Main Issue
The main issue is that your application is not evaluating manifest.json at all. In order to fetch the descriptor in the first place, your app needs to use sap/ui/core/ComponentContainer and UIComponent with metadata: { manifest: "json" }. These are completely missing in your index.html. I.e. the app doesn't even know that there are routing settings.
A ComponentContainer is needed since Components cannot be added to the UI without a container. And in Component.js, the metadata: { manifest: "json" } assignment tells the framework to fetch the app descriptor manifest.json which will be then evaluated with all the router settings.
ComponentContainer can be added to index.html declaratively without an inline-script using the sap/ui/core/ComponentSupport module. Please see the linked API reference for further guidance.
Other Issues
There are more inconsistencies with the guidelines which should be also fixed together with the main issue.
❌ The neo-app.json being in the webapp folder whereas Component.js isn't.
✔️ For the proper folder structure, follow the topic Folder Structure: Where to Put Your Files. I.e. Component.js should be inside, neo-app.json outside of the webapp folder.
❌ Using deprecated APIs as well as calling methods without requiring modules
✔️ Consult API reference which APIs to use instead of deprecated ones. E.g. defining controllers using sap.ui.controller should be replaced with Controller#extend.
✔️ Require sap/ui/core/UIComponent first, and then call UIComponent.getRouterFor.
❌ Module name prefixes mismatching with base namespace.
✔️ For proper module registration according to the guideline, keep the general namespace consistent with the base resourceRoot namespace.
Also I see that the homepage view is assigned to sap.ui5/rootView too. Please avoid that.
Here are some snippets incorporating the above mentioned points:
Given this folder structure..
In
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>In
Component.js:return UIComponent.extend("myCompany.myApplication", { metadata: { manifest: "json" }, init: function() { UIComponent.prototype.apply(this, arguments); this.getRouter().initialize(); }, });In
manifest.json,"sap.ui5":{ "rootView": { "viewName": "myCompany.myApplication.view.NotHomepage", "...": "..." }, "routing": { "config": { "viewPath": "myCompany.myApplication.view", "...": "..." }, "routes": [ { "pattern": "", "name": "homepage", "target": "homepage" }, "..." ], "...": "..." }In controllers
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(); }, // ... }); });In JS views:
sap.ui.jsview("myCompany.myApplication.view.Homepage", { // e.g. view/Homepage.view.js getControllerName: function() { return "myCompany.myApplication.controller.Homepage"; }, // ... });Update:
sap.ui.jsviewis now fully deprecated. Use Typed Views instead!
Since the project seems relatively small, I'd suggest to start anew using the basic SAPUI5 template:
.
这篇关于导航到不同的 (JS) 视图 - 无法访问路由器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
