Question

我正在关注SAPUI5的MVC模型。我有一个MyRouter.js，其中包含以下代码：

jQuery.sap.declare("sap.ui.demo.Onepage.MyRouter");

sap.ui.demo.Onepage.MyRouter={

    /**
     * to monkey patch the router with the mobile nav back handling
     */
    myNavBack : function (route, data) {
        var history = sap.ui.core.routing.History.getInstance();
        var url = this.getURL(route, data);
        var direction = history.getDirection(url);
        if ("Backwards" === direction) {
            window.history.go(-1);
        } else {
            var replace = true; // otherwise we go backwards with a forward history
            this.navTo(route, data, replace);
        }
    },

    /**
     * to monkey patch the router with a nav to method that
     * does not write hashes but load the views properly
     */
    myNavToWithoutHash : function (viewName, viewType, master, data) {
        var oapp = sap.ui.getCore().byId("Myapp");
        var oview = this.getView(viewName, viewType);
        oapp.addPage(oview, master);
        oapp.to(view.getId(), "show", data);
    }
};

Component.js：

jQuery.sap.declare("sap.ui.demo.Onepage.Component");

sap.ui.core.UIComponent.extend("sap.ui.demo.Onepage.Component", {

    metadata : {
        routing : {
            config : {
                viewType : "XML",
                viewPath : "view",
                targetControl : "Myapp",
                targetAggregation: "pages",
                clearTarget : false,
                transition: "slide"
            },
                        routes : [
                {
                    pattern : "",
                    name : "Myapp",
                    view : "App",
                    viewPath : "view",
                    targetAggregation: "pages",
                    viewLevel : 1,

                }]

        }
    },

    /**
     * !!! The steps in here are sequence dependent !!!
     */
    init : function () {

        // 1. some very generic requires
        jQuery.sap.require("sap.m.routing.RouteMatchedHandler");
        jQuery.sap.require("sap.ui.demo.Onepage.MyRouter");

        // 2. call overridden init (calls createContent)
        sap.ui.core.UIComponent.prototype.init.apply(this, arguments);

        // 3a. monkey patch the router
        var router = this.getRouter();
        router.myNavBack = sap.ui.demo.Onepage.MyRouter.myNavBack;
        router.myNavToWithoutHash = sap.ui.demo.Onepage.MyRouter.myNavToWithoutHash;

        if (!sap.ui.Device.system.phone) {
            router.myNavToWithoutHash("view.hello", "XML", false);
        }

        // 4. initialize the router
        this.routeHandler = new sap.m.routing.RouteMatchedHandler(router);
        router.initialize();
    },

    destroy : function () {
        if (this.routeHandler) {
            this.routeHandler.destroy();
        }

        // call overridden destroy
        sap.ui.core.UIComponent.prototype.destroy.apply(this, arguments);
    },

    createContent : function () {
        // create root view
        var oView = sap.ui.view({
            id : "app",
            viewName : "view.App",
            type : "XML",
            viewData : { component : this }
        });

        // set navigation model
        // load the global data model
        /*var oJSONDataModel = new sap.ui.model.json.JSONModel("model/data.json");
        oView.setModel(oJSONDataModel);

        // load the global image source model
        var oImgModel = new sap.ui.model.json.JSONModel("model/img.json");
        oView.setModel(oImgModel, "img"); */

        // done
        return oView;
    }
});

一切正常，直到我从任何控制器调用myNavToWithoutHash函数。我得到的错误是：

Uncaught TypeError: Cannot read property 'addPage' of undefined - MyRouter.js :27

我找不到可能的问题。请帮忙。

Answer 1

XMLViews自动为ID添加前缀。所以你的DOM中的sap.m.App的真实ID可能是......喜欢＆＃34; __ xmlview0 - MyApp＆＃34;而＆＃34; __ xmlview0＆＃34;如果它有任何内容将是你的视图ID（只需检查元素选项卡）。使用sap.ui.getCore().byId()查询控件将不知道/尊重任何此前缀。它搜索id＆＃34; MyApp＆＃34;这显然是！=＆＃34; __ xmlview0 - MyApp＆＃34;。幸运的是，您的XMLView具有id＆＃34; app＆＃34;你应该没问题：

<强> sap.ui.getCore().byId("app--Myapp");

请记住：每当您使用XMLView时，您都无法使用sap.ui.getCore().byId('MyApp')，但必须在视图控制器中使用this.getView().byId('MyApp')。

此外请注意，您只需在路由配置中声明，即可使用自定义路由器类：

metadata : {
        routing : {
            config : {
                routerClass: sap.ui.demo.Onepage.MyRouter,
                viewType : "XML",
                viewPath : "view",
                targetControl : "Myapp",
                targetAggregation: "pages",
                clearTarget : false,
                transition: "slide"
            }
            ...

您可能已经猜到，因此您的路由器需要扩展sap.ui.core.routing.Router！

HF 基督教

Answer 2

您的错误似乎与找不到应用程序有关。

    var oapp = sap.ui.getCore().byId("Myapp");

您需要在App.view.xml中为控制器类声明 controllerName 属性。

<mvc:View height="100%" xmlns:mvc="sap.ui.core.mvc" controllerName="view.App" 
      xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core" xmlns="sap.m"> 
    <App id="Myapp" />
</mvc:View>

SAPUI5- MyRouter.js无法正常工作

2 个答案: