我最近开始使用 UI5,并且被视图之间的路由所困扰。我能够在两个 XML 视图之间路由以及从 XML 视图到 JS 视图。但是,我无法离开 JS 视图。
第一个视图已加载,但当路由到第二个视图时,控制台上的消息是:
未捕获类型错误:无法读取未定义的属性“navTo”。
方法
sap.ui.core.UIComponent.getRouterFor(this)
返回undefined
。
组件.js:
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device",
"sapui5/app53/model/models"
], function(UIComponent, Device, models) {
"use strict";
return UIComponent.extend("sapui5.app53.Component", {
metadata: {
manifest: "json"
},
init: 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": "pages",
"routerClass": "sap.m.routing.Router"
},
"routes": [
{
"pattern": "",
"name": "First",
"view": "zjs_view_53_02",
"targetAggregation": "pages"
},
{
"pattern": "second",
"name": "Second",
"view": "zjs_view_53_03",
"targetAggregation": "pages"
}
]
}
容器视图:
sap.ui.jsview("sapui5.app53.view.zjs_view_53_01", {
getControllerName: function() {
return "sapui5.app53.controller.zjs_view_53_01";
},
createContent: function(oController) {
this.setDisplayBlock(true);
return new sap.m.App("idPageContainer");
}
});
第一眼:
sap.ui.jsview("sapui5.app53.view.zjs_view_53_02", {
getControllerName: function() {
return "sapui5.app53.controller.zjs_view_53_02";
},
createContent: function(oController) {
var oButton = new sap.m.Button({
id: "idButton1",
text: "Go to Next View",
press: [oController.onNextView]
});
return new sap.m.Page({
title: "Title Page 2",
content: [
oButton
]
});
}
});
第一个视图的控制器:
sap.ui.controller("sapui5.app53.controller.zjs_view_53_02", {
onNextView: function() {
var router = sap.ui.core.UIComponent.getRouterFor(this);
return router.navTo("Second", null); // Error
}
});
更新:自 UI5 v1.90 起,JS View 已弃用。 使用键入视图。
在
JSView
中或每当为事件分配处理程序时,请确保始终传递侦听器对象 (oController
)(如果需要):
var oButton = new sap.m.Button({
id: this.createId("idButton1"),
text: "Go to Next View",
press : [oController.onNextView, oController],
});
在处理程序中,
this
将是您的控制器实例,它允许从那里访问路由器。
了解更多:
我在你的容器视图中看到的是
return sap.m.App("id")
可能这只是一个错字,但我想你需要返回一个new sap.m.App:
return new sap.m.App("id")