从全屏视图导航到主 - 详细信息视图SAPUI5

Question

亲爱的大师，

作为我的标题，我试着创建一个App，其中包含一个带有一些图块的全屏菜单页面，当用户按下一个图块时，它会导航到另一个Master-Detail页面。我的问题是我无法显示详细信息页面。我的代码如下：

manifest.json：

    "routing": {
        "config": {
            "routerClass": "sap.m.routing.Router",
            "viewType": "XML",
            "viewPath": "WYTH.view",
            "controlId": "rootApp",
            "controlAggregation": "pages"
        },
        "routes": [{
            "pattern": "menu",
            "name": "menu",
            "view": "Menu",
            "targetControl": "rootApp",
            "targetAggregation": "pages"
        }, {
            "pattern": "zwm01",
            "name": "zwm01",
            "view": "ZWM01Root",
            "targetControl": "rootApp",
            "targetAggregation": "pages",
            "subroutes": [{
                "pattern": "zwm01/",
                "name": "zwm01master",
                "view": "ZWM01Master",
                "targetControl": "ZWM01",
                "targetAggregation": "masterPages",
                "subroutes": [{
                    "pattern": "zwm01/",
                    "name": "zwm01detail",
                    "view": "ZWM01Detail",
                    "targetControl": "ZWM01",
                    "targetAggregation": "detailPages"
                }]
            }]
        }]
    },

我设法用这个显示菜单视图。当我点击1个图块时，它会触发下面的功能：

navZWM01: function() {
        this.getRouter().navTo("zwm01", false); 
    },

结果，它不显示详细页面，而是显示母版页

有什么建议吗？

祝你好运

Answer 1

1）要启动全屏应用，我使用如下路由。在这里，我在rootView的帮助下加载App容器

routes : [
  {
    pattern : "",
    name : "_full1",
    targetAggregation: "pages",
    target : "monitorOperations"
   }
 ],

"targets": {
     "monitorOperations" : {
                "viewName": "Full1", 
                "viewLevel": 1, 
                "viewId": "_Full1Id", 
                "controlId": "idAppControl",
                "controlAggregation": "pages" 
       },
}

2）使用路由加载主详细信息模板，如下所示。这里我在rootView的帮助下加载了splitApp容器

routes : [
             { 
               "pattern": "", 
                "name": "master", 
                "target": ["detail", "master"] 
             }, 
             { 
               "pattern": "detail/{detailId}", 
                "name": "detail",
                "target": ["master", "detail"] 
            } 
           ],
"targets": { 
           "master": {
                        "viewName": "Master", 
                        "viewLevel": 1, 
                         "viewId": "master", 
                         "controlId": "idAppControl",
                        "controlAggregation": "masterPages" 
                       }, 
            "detail": {
                     "viewName": "Detail", 
                      "viewId": "detail",
                      "controlId": "idAppControl",
                      "controlAggregation": "detailPages", 
                      "viewLevel": 2 
                    }, 
          "notFound": {
                 "viewName": "NotFound", 
                  "viewId": "notFound", 
                  "viewLevel": 3 
            } 
        }

将两者结合起来，首先加载全屏（app容器），当用户点击按钮或在全屏幕中选择任何Tile / Item然后加载第二页（拆分容器包含master和detail）

routing: {
    config : {
            routerClass : MyRouter,
            viewType : "XML",
            viewPath : "org.edu.ui.views",
            targetAggregation : "detailPages",
            clearTarget : false
             },
         routes : [
                {
                    pattern : "",
                     name : "_full1",
                    arget   : "monitorOperations"
                },
                {
                    pattern : "manageOperations",
                    name : "_full2",
                    target  : ["SplitAppContainer","detail", "master"]
                },
                {  
                                "pattern": "detail/{product}",  
                                "name": "detail",
                                "target": ["master", "detail"]  
                         },
                {  
                                "pattern": "manageOperations1",  
                                "name": "master",  
                                "target": ["detail", "master"]  
                            }
                ],

    "targets": {
            "monitorOperations" : {
                    "viewName": "Full1",  
                                         "viewLevel": 1,  
                                         "viewId": "_Full1Id",  
                                         "controlId": "idAppControl",
                                         "controlAggregation": "pages" 
                    },
            "SplitAppContainer" : {
                    "viewId": "_Full2Id",  
                    "viewName": "Full2",  
                                        "viewLevel": 1,  
                                        "controlId": "idAppControl",
                                        "controlAggregation": "pages"
                    },
            "master": {
                    "parent" : "SplitAppContainer",
                                        "viewName": "Master1",  
                                        "viewLevel": 2,  
                                        "viewId": "master",  
                                        "controlId": "idSplitContainerControl",
                                        "controlAggregation": "masterPages"  
                                       },  
                    "detail": {
                                     "parent" : "SplitAppContainer",
                                     "viewName": "Detail",  
                                     "viewId": "detail",
                                     "controlId": "idSplitContainerControl",
                                     "controlAggregation": "detailPages", 
                                     "viewLevel": 3  
                                },  
                    "notFound": {
                                 "viewName": "NotFound",  
                                 "viewId": "notFound",  
                                 "viewLevel": 3  
                             } 
                      } 
      }

我在实施中使用了这个，感谢Saran Kumar，希望这很有帮助。

Answer 2

尝试创建两个路径和两个目标，一个用于Master，一个用于Details。每个目标都绑定到View，如目标的viewName属性中所定义。设置两个路由的target属性以导航到两个目标。

"routes": [
    {
      "pattern": "",
      "name": "master",
      "target": ["object", "master"]
    },
    {
      "pattern": "Objects/{objectId}",
      "name": "object",
      "target": ["master", "object"]
    }
  ],
  "targets": {
    "master": {
      "viewName": "Master",
      "viewLevel": 1,
      "viewId": "master",
      "controlAggregation": "masterPages"
    },
    "object": {
      "viewName": "Detail",
      "viewId": "detail",
      "viewLevel": 2
    }

然后，当您从平铺点击导航时，两个目标都会匹配。如果将参数传递给详细信息视图，请捕获Router对象的“routeMatched”或“patternMatched”事件，并使用bindElement()更改“详细信息”视图上下文

这在demokit中非常详细：Master-Detail Navigation