SAPUI5视图更改

2020-08-17 10:12发布

891 2

点击此处---> 群内免费提供SAP练习系统（在群公告中）

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

您好，我正在开发一个包含一个（结果）视图的SAPUI5，我想在单击第一个的按钮上添加另一个。单击一个简单的按钮后，它应该打开。
目前，我已经创建了新的（详细信息）视图，App.view并更改了清单，现在单击该按钮后，它会在URL中添加/detail，但是该视图不会更改。（.../index.html/detail）

我尝试更改rootView（从结果中），它不会显示任何内容。

" rootView"：{" viewName"：" Data.view.App"，至应用

如何执行视图更改？

还尝试遵循第31步：路由和导航

有两个视图结果带有导航按钮和我无法显示的详细信息。

清单

"路由"：{
             "目标"：{
                 "结果"：{
                     " viewType"：" XML"，
                     " transition"：" slide"，
                     " clearAggregation"：正确，
                     " viewName"："结果"，
                     " viewLevel"：1
                 }，
                 "详细信息"：{
                     " viewType"：" XML"，
                     " transition"：" slide"，
                     " clearAggregation"：正确，
                     " viewName"："详细信息"，
                     " viewLevel"：2
                 }
             }，
             "路线"：[{
                 " name"："结果"，
                 " pattern"：""，
                 " titleTarget"："结果"，
                 "贪婪"：false
             }，{
                 " name"："详细信息"，
                 " pattern"："详细信息"，
                 " titleTarget"："详细信息"，
                 "贪婪"：false
             }]，
             " config"：{
                 " routerClass"：" sap.m.routing.Router"，
                 " viewType"：" XML"，
                 " viewPath"：" sap.ui.demo.wt.view"，
                 " controlId"：" app"，
                 " controlAggregation"："页面"
             }
         }

App.controller

 sap.ui.define（[
     " sap/ui/core/mvc/Controller"
 ]，函数（控制器）{
     "使用严格"；
     返回Controller.extend（" Data.controller.App"，{
     }）;
 }）;

App.view

Component.js

 sap.ui.define（[
     " sap/ui/core/UIComponent"，
     " sap/ui/设备"，
     "数据/模型/模型"
 ]，功能（UIComponent，设备，模型）{
     "使用严格"；
     返回UIComponent.extend（" Data.Component"，{
         元数据：{
             清单：" json"
         }，
         初始化：function（）{
             UIComponent.prototype.init.apply（this，arguments）;
             this.setModel（models.createDeviceModel（），" device"）;
             this.getRouter（）。initialize（）;
         }
     }）;
 }）;

Index.html

 <！DOCTYPE HTML>
 
     <头>
         
         
         数据
         
         
         <脚本>
             sap.ui.getCore（）。attachInit（function（）{
                 新的sap.m.Shell（{
                     应用：新的sap.ui.core.ComponentContainer（{
                         高度：" 100％"，
                         名称："数据"
                     }）
                 }）。placeAt（" content"）;
             }）;

Results.controller

 var goRouter;
 onInit：function（）{
             goRouter = sap.ui.core.UIComponent.getRouterFor（this）; ....}，
 handlePress：函数（oEvent）{
            //var oRouter = sap.ui.core.UIComponent.getRouterFor（this）;
            //console.debug(oRouter）; //未定义
             console.debug（oEvent.getSource（）。getBindingContext（）。getObject（））;
             goRouter.navTo（" Detail"）;
         }

点击此处---> 群内免费提供SAP练习系统（在群公告中）

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

我尝试更改rootView（从结果中），它不会显示任何内容。

" rootView"：{" viewName"：" Data.view.App"，至应用

如何执行视图更改？

还尝试遵循第31步：路由和导航

有两个视图结果带有导航按钮和我无法显示的详细信息。

清单

"路由"：{
             "目标"：{
                 "结果"：{
                     " viewType"：" XML"，
                     " transition"：" slide"，
                     " clearAggregation"：正确，
                     " viewName"："结果"，
                     " viewLevel"：1
                 }，
                 "详细信息"：{
                     " viewType"：" XML"，
                     " transition"：" slide"，
                     " clearAggregation"：正确，
                     " viewName"："详细信息"，
                     " viewLevel"：2
                 }
             }，
             "路线"：[{
                 " name"："结果"，
                 " pattern"：""，
                 " titleTarget"："结果"，
                 "贪婪"：false
             }，{
                 " name"："详细信息"，
                 " pattern"："详细信息"，
                 " titleTarget"："详细信息"，
                 "贪婪"：false
             }]，
             " config"：{
                 " routerClass"：" sap.m.routing.Router"，
                 " viewType"：" XML"，
                 " viewPath"：" sap.ui.demo.wt.view"，
                 " controlId"：" app"，
                 " controlAggregation"："页面"
             }
         }

App.controller

 sap.ui.define（[
     " sap/ui/core/mvc/Controller"
 ]，函数（控制器）{
     "使用严格"；
     返回Controller.extend（" Data.controller.App"，{
     }）;
 }）;

App.view

Component.js

 sap.ui.define（[
     " sap/ui/core/UIComponent"，
     " sap/ui/设备"，
     "数据/模型/模型"
 ]，功能（UIComponent，设备，模型）{
     "使用严格"；
     返回UIComponent.extend（" Data.Component"，{
         元数据：{
             清单：" json"
         }，
         初始化：function（）{
             UIComponent.prototype.init.apply（this，arguments）;
             this.setModel（models.createDeviceModel（），" device"）;
             this.getRouter（）。initialize（）;
         }
     }）;
 }）;

Index.html

 <！DOCTYPE HTML>
 
     <头>
         
         
         数据
         
         
         <脚本>
             sap.ui.getCore（）。attachInit（function（）{
                 新的sap.m.Shell（{
                     应用：新的sap.ui.core.ComponentContainer（{
                         高度：" 100％"，
                         名称："数据"
                     }）
                 }）。placeAt（" content"）;
             }）;

Results.controller

 var goRouter;
 onInit：function（）{
             goRouter = sap.ui.core.UIComponent.getRouterFor（this）; ....}，
 handlePress：函数（oEvent）{
            //var oRouter = sap.ui.core.UIComponent.getRouterFor（this）;
            //console.debug(oRouter）; //未定义
             console.debug（oEvent.getSource（）。getBindingContext（）。getObject（））;
             goRouter.navTo（" Detail"）;
         }

2条回答

Violet凡

1楼-- · 2020-08-17 10:46

我看到一些不正确的东西。我建议先在Chrome中打开开发工具。查看控制台日志以查看错误。

基于您在帖子中共享的代码，我还注意到您还需要更正其他几件事：

-manifest.json- >路由->配置-> viewPath = Data.view =>数据是您的项目名称和"视图"，假设您的视图存储在视图文件夹中

-app.view.xml-> controllerName->命名空间又错误，应该是" Data.controller.App"

可能还有其他错误，可以共享控制台日志吗？

Doze时光

2楼-- · 2020-08-17 10:52

I 我正在使用本地Sap Web IDE