SAPUI5-JavaScript视图之间的路由不起作用

2020-09-25 02:42发布

         点击此处--->   EasySAP.com群内免费提供SAP练习系统(在群公告中)

加入QQ群:457200227(SAP S4 HANA技术交流) 群内免费提供SAP练习系统(在群公告中)


嗨,

我最近开始使用SAPUI5,并且对视图之间的路由感到困惑。 我能够在2个XML视图之间以及从XML视图到JS视图之间进行路由,但是我无法从JS视图中导航。

已加载第一个视图,但是当路由到第二个视图时,控制台上的消息是"未捕获的TypeError:无法读取未定义的属性'navTo'"。 方法" sap.ui.core.UIComponent.getRouterFor(this)"返回"未定义"。

请帮助。

project-structre.jpg

Component.js

 sap.ui.define([
 " sap/ui/core/UIComponent",
 " sap/ui/设备",
 " sapui5/app53/model/models"
 ],功能(UIComponent,设备,模型){
 "使用严格";
 返回UIComponent.extend(" sapui5.app53.Component",{
 元数据:{
 清单:" json"
 },

 初始化:function(){
 UIComponent.prototype.init.apply(this,arguments);
 this.setModel(models.createDeviceModel()," device");
 this.getRouter()。initialize();
 }
 });
 });
 

manifest.json

"路由":{
 " config":{
 " viewType":" JS",
 " viewPath":" sapui5.app53.view",
 " targetControl":" idPageContainer",
 " targetAggregation":"页面",
 " routerClass":" sap.m.routing.Router"
 },
 "路线":[{
 " pattern":"",
 " name":" First",
 " view":" zjs_view_53_02",
 " targetAggregation":"页面"
 },
 {
 " pattern":"第二",
 " name":" Second",
 " view":" zjs_view_53_03",
 " targetAggregation":"页面"
 }]
 }
 

容器视图-zjs_view_53_01

 sap.ui.jsview(" sapui5.app53.view.zjs_view_53_01",{

 getControllerName:function(){
 返回" sapui5.app53.controller.zjs_view_53_01";
 },

 createContent:function(oController){
 this.setDisplayBlock(true);
 返回sap.m.App(" idPageContainer");
 }

 });
 

第一个视图-zjs_view_53_02

 sap.ui.jsview(" sapui5.app53.view.zjs_view_53_02",{
 getControllerName:function(){
 返回" sapui5.app53.controller.zjs_view_53_02";
 },

 createContent:function(oController){



 var oButton = new sap.m.Button({
 id:" idButton1",//sap.ui.core.ID
 text:" Go to Next View",//字符串
 按下:[oController.onNextView]
 });
  返回新的sap.m.Page({
 标题:"标题页2",
 内容:[
 o按钮
 ]
 });
 }
 });
 

用于"第一视图"的控制器:

 sap.ui.controller(" sapui5.app53.controller.zjs_view_53_02",{


 onNextView:function(){
 var路由器;
 路由器= sap.ui.core.UIComponent.getRouterFor(this);
 返回router.navTo(" Second",null);

 },
 
project-structre.jpg (38.1 kB)

         点击此处--->   EasySAP.com群内免费提供SAP练习系统(在群公告中)

加入QQ群:457200227(SAP S4 HANA技术交流) 群内免费提供SAP练习系统(在群公告中)


嗨,

我最近开始使用SAPUI5,并且对视图之间的路由感到困惑。 我能够在2个XML视图之间以及从XML视图到JS视图之间进行路由,但是我无法从JS视图中导航。

已加载第一个视图,但是当路由到第二个视图时,控制台上的消息是"未捕获的TypeError:无法读取未定义的属性'navTo'"。 方法" sap.ui.core.UIComponent.getRouterFor(this)"返回"未定义"。

请帮助。

project-structre.jpg

Component.js

 sap.ui.define([
 " sap/ui/core/UIComponent",
 " sap/ui/设备",
 " sapui5/app53/model/models"
 ],功能(UIComponent,设备,模型){
 "使用严格";
 返回UIComponent.extend(" sapui5.app53.Component",{
 元数据:{
 清单:" json"
 },

 初始化:function(){
 UIComponent.prototype.init.apply(this,arguments);
 this.setModel(models.createDeviceModel()," device");
 this.getRouter()。initialize();
 }
 });
 });
 

manifest.json

"路由":{
 " config":{
 " viewType":" JS",
 " viewPath":" sapui5.app53.view",
 " targetControl":" idPageContainer",
 " targetAggregation":"页面",
 " routerClass":" sap.m.routing.Router"
 },
 "路线":[{
 " pattern":"",
 " name":" First",
 " view":" zjs_view_53_02",
 " targetAggregation":"页面"
 },
 {
 " pattern":"第二",
 " name":" Second",
 " view":" zjs_view_53_03",
 " targetAggregation":"页面"
 }]
 }
 

容器视图-zjs_view_53_01

 sap.ui.jsview(" sapui5.app53.view.zjs_view_53_01",{

 getControllerName:function(){
 返回" sapui5.app53.controller.zjs_view_53_01";
 },

 createContent:function(oController){
 this.setDisplayBlock(true);
 返回sap.m.App(" idPageContainer");
 }

 });
 

第一个视图-zjs_view_53_02

 sap.ui.jsview(" sapui5.app53.view.zjs_view_53_02",{
 getControllerName:function(){
 返回" sapui5.app53.controller.zjs_view_53_02";
 },

 createContent:function(oController){



 var oButton = new sap.m.Button({
 id:" idButton1",//sap.ui.core.ID
 text:" Go to Next View",//字符串
 按下:[oController.onNextView]
 });
  返回新的sap.m.Page({
 标题:"标题页2",
 内容:[
 o按钮
 ]
 });
 }
 });
 

用于"第一视图"的控制器:

 sap.ui.controller(" sapui5.app53.controller.zjs_view_53_02",{


 onNextView:function(){
 var路由器;
 路由器= sap.ui.core.UIComponent.getRouterFor(this);
 返回router.navTo(" Second",null);

 },
 
project-structre.jpg (38.1 kB)
付费偷看设置
发送
2条回答
大圣 - sap领域执行人,9年sap运营经验
1楼 · 2020-09-25 03:28.采纳回答

声明按钮时,必须为其提供范围。 尝试将新闻事件更改为

[oController.onNextView,oController]

此致

Jamie

愤怒的猪头君
2楼-- · 2020-09-25 03:03

没问题,很高兴为您提供帮助。 我经历过同样的事情,猜想这只是开发的一部分...

此致

Jamie

一周热门 更多>