Question

我最近刚开始使用SAPUI5，并且在视图之间遇到了路由。我能够在两个XML视图和两个XML视图之间进行路由。从XML视图到JS视图。但是，我无法远离JS视图。

第一个视图已加载，但在路由到第二个视图时，控制台上的消息为：

未捕获的TypeError：无法读取未定义的属性'navTo'。

方法sap.ui.core.UIComponent.getRouterFor(this)返回undefined。

Component.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"
        },

        /**
         * The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
         * @public
         * @override
         */
        init: function() {
            // call the base component's init function
            UIComponent.prototype.init.apply(this, arguments);

            // set the device model
             this.setModel(models.createDeviceModel(), "device");
            this.getRouter().initialize();

        }
    });
});

manifest.json的路由部分

"routing": {
    "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 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", // sap.ui.core.ID
            text : "Go to Next View", // string
            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;
        router = sap.ui.core.UIComponent.getRouterFor(this);
        return router.navTo("Second", null);
    }
}

Answer 1

我在您的容器视图中看到的是

return sap.m.App("id")

可能这只是一个错字，但我想你需要返回 new sap.m.App：

return new sap.m.App("id")

Answer 2

您错过了将侦听器对象（Controller）传递给oButton

中的印刷处理程序

var oButton = new sap.m.Button({
  id: "idButton1",
  text: "Go to Next View",
  press : [ oController.onNextView, oController ]
});

this将是您的控制器实例，UI5可以从中访问路由器。

SAPUI5 - 在JavaScript视图之间路由不可用

2 个答案: