导航到相同的视图,但使用不同的参数

Question

我试图创建一个使用瓷砖的列表一个启动的应用程序,问题是,当我在平铺单击它可能是一个应用程序,然后我浏览到应用程序的URL或者它可能是一个组的应用程序或比我更需要其他群体导航到启动板的相同视图,但使用新的切片列表.现在,我只想导航导航到了同样的观点,当我在一个瓷砖点击与幻灯片过渡做,但如果我创建缺省路由的同一目标的路由,当我启动应用程序的视图不会渲染,只有当我创建具有相同视图名称的其他目标时,才能使用该路径的目标.

我的清单的一部分在哪里:

 "routes": [
        {
          "pattern": "",
          "name": "group",
          "target": "group"
        },
        {
          "pattern": "group",
          "name": "group2",
          "target": "group2"
        }
      ],
      "targets": {
        "group": {
          "viewName": "TileGroup",
          "viewLevel" : 1
        },
        "group2": {
          "viewName": "TileGroup",
          "viewLevel" : 2
        }
      }
    }

这里是我TileGroup视图的控制器.

sap.ui.define([
   "sap/ui/core/UIComponent"
],
sap.ui.controller("pelissari.soficom.launchpad.controller.TileGroup", {
	onInit: function() {
		var oModel = new sap.ui.model.json.JSONModel();
 		oModel.loadData("./model/data.json");
 		this.getView().setModel(oModel);
		
	},
		onPress: function (oEvent) {
			var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
			oRouter.navTo("group2");
		}
	}));

使用此代码,我认为导航工作正常,因为当我单击某个图块但视图不会更改时,应用程序的网址会发生变化.

Answer 1

如果您看到URL被更改,那么您已准备好解决方案的第一部分.唯一的事情是你不应该导航到新的目标.相反,您应该导航到同一目标,但使用方法的第二个参数传递另一个tilegroup标识符navTo,例如:

oRouter.navTo("tileView", {group: "group1"});

第二部分涉及在URL更改时在控制器中引发事件,以便您可以对更改进行操作.

要捕获使用该navTo方法传递的ID ,您应该相应地更改清单中的路由模式,例如:

"pattern": "tiles/:group:"

tiles表示URL中的固定部分,同时:group:指定一个名为的可选参数group.如果你想从根本做这个(我认为这是你打算做的),它应该是

"pattern": ":group:"

要通知路由器您希望在URL更改时触发,您可以设置回叫.您可以通过将以下代码插入控制器的onInit处理程序来实现:

var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.getRoute("group").attachPatternMatched(this._onPatternMatched, this);

当它在您的onInit处理程序中时,_onPatternMatched当涉及目标的URL发生更改时,将调用该处理程序group.后者很有用,否则即使链接到控制器的视图不可见,也会触发每个URL更改的方法.

从该_onPatternMatched方法中,您应该回读应该显示的组ID,以便您可以更改切片.您可以通过arguments从event参数中读取参数来完成此操作:

_onObjectMatched : function (oEvent) {
    var groupId =  oEvent.getParameter("arguments").group;
    console.log("Group ID: " + groupId);
},

路由的要领是在很好解释UI5步行通过步骤31,32和33.请特别注意第32部分,它解释了使用参数进行路由.