View1.controller.js？eval：8 Uncaught（在promise中）TypeError：无法读取未定义的属性'getModel'

Question

我是SAPUI5的新手。我试图从Manifest文件加载JSON模型，并通过路由和导航发送JSON对象作为参数。

我只有一个视图，并且我试图以简单的形式绑定数据。我收到一个错误：

View1.controller.js？eval：8 Uncaught（在promise中）TypeError：无法读取未定义的属性'getModel'

请帮我解决错误。

的manifest.json

{
    "_version": "1.8.0",

    "sap.app": {
        "_version": "1.3.0",
        "id": "com.newproject.firstsapui5project",
        "type": "application",
        "i18n": "i18n/i18n.properties",
        "applicationVersion": {
            "version": "1.0.0"
        },
        "title": "{{appTitle}}",
        "description": "{{appDescription}}",
        "sourceTemplate": {
            "id": "ui5template.basicSAPUI5ApplicationProject",
            "version": "1.40.12"
        },
    "dataSources": {
        "data": {
            "type" : "JSON",
            "uri": "model/data.json"

        }
    }
    },

    "sap.ui": {
        "_version": "1.3.0",
        "technology": "UI5",
        "icons": {
            "icon": "",
            "favIcon": "",
            "phone": "",
            "phone@2": "",
            "tablet": "",
            "tablet@2": ""
        },
        "deviceTypes": {
            "desktop": true,
            "tablet": true,
            "phone": true
        },
        "supportedThemes": [
            "sap_hcb",
            "sap_belize"

        ]
    },

    "sap.ui5": {
        "_version": "1.2.0",
        "rootView": {
            "viewName": "com.newproject.firstsapui5project.view.View1",
            "type": "XML"
        },
        "dependencies": {
            "minUI5Version": "1.60.1",
            "libs": {
                "sap.ui.layout": {},
                "sap.ui.core": {},
                "sap.m": {}
            }
        },
        "contentDensities": {
            "compact": true,
            "cozy": true
        },
        "models": {
            "i18n": {
                "type": "sap.ui.model.resource.ResourceModel",
                "settings": {
                    "bundleName": "com.newproject.firstsapui5project.i18n.i18n"
                }
            },

        "simpleForm": {
                    "type": "sap.ui.model.json.JSONModel",
                    "dataSource" : "data"
        }
        },
        "resources": {
            "css": [{
                "uri": "css/style.css"
            }]
        },
        "routing": {
            "config": {
                "routerClass": "sap.m.routing.Router",
                "viewType": "XML",
                "async": true,
                "viewPath": "com.newproject.firstsapui5project.view",
                "controlAggregation": "pages",
                "controlId": "idAppControl",
                "clearControlAggregation": false
            },
            "routes": [{
                "name": "RouteView1",
                "pattern": "RouteView1",
                "target": ["TargetView1"]
            }],
            "targets": {
                "TargetView1": {
                    "viewType": "XML",
                    "transition": "slide",
                    "clearControlAggregation": false,
                    "viewName": "View1"
                }
            }
        }
    }
}

View1.controller.js

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function (Controller) {
    "use strict";

    var oController= Controller.extend("com.newproject.firstsapui5project.controller.View1", {
        onInit: function () {
            var dataModel = this.getOwnerComponent().getModel("simpleForm");
            this.getView().setModel(dataModel, "DataModel");

        }     
    });
    return oController;
});

Component.js

sap.ui.define([
    "sap/ui/core/UIComponent",
    "sap/ui/Device",
    "com/newproject/firstsapui5project/model/models"
], function (UIComponent, Device, models) {
    "use strict";

var Component = UIComponent.extend("com.newproject.firstsapui5project.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);
            this.setModel(models.createDeviceModel(), "device");
            this.getRouter().initialize();
        }
    });
    return Component;
});

data.json

{"Form" : [{
        "first":"tom",
        "lastname":"butler",
        "height": "6foot",
        "gender":"Male"
        }]
}

View1.view.xml

<mvc:View controllerName="com.newproject.firstsapui5project.controller.View1" xmlns:html="http://www.w3.org/1999/xhtml"
    xmlns:mvc="sap.ui.core.mvc" xmlns:f="sap.ui.layout.form" displayBlock="true" xmlns="sap.m">
    <App id="idAppControl">
        <pages>
            <Page title="My First sapui5 Project">
                <content>

                    <f:SimpleForm id="idSimpleForm" editable="true" layout="ResponsiveGridLayout" title='TEST Form'>
                        <f:content>
                            <Label text="First Name"/>
                            <Input value="simpleForm>/Form/0/first" />
                            <Label text="Last Name"/>
                            <Input value="{simpleForm>/Form/0/lastname}">
                                </Input>
                        </f:content>
                    </f:SimpleForm>
                </content>
            </Page>
        </pages>
    </App>
</mvc:View>

model.js

sap.ui.define([
    "sap/ui/model/json/JSONModel",
    "sap/ui/Device"
], function (JSONModel, Device) {
    "use strict";

    return {

        createDeviceModel: function () {
            var oModel = new JSONModel(Device);
            oModel.setDefaultBindingMode("OneWay");
            return oModel;
        }

    };
});

的index.html

<!DOCTYPE HTML>
<html>

    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="UTF-8">

        <title>firstsapui5project</title>

        <script id="sap-ui-bootstrap"
            src="../../resources/sap-ui-core.js"
            data-sap-ui-async="true"
            data-sap-ui-libs="sap.m"
            data-sap-ui-theme="sap_belize"
            data-sap-ui-compatVersion="edge"
            data-sap-ui-language="en"
            data-sap-ui-xx-componentPreload="off"
            data-sap-ui-resourceroots='{"com.newproject.firstsapui5project": ""}'>
        </script>

        <link rel="stylesheet" type="text/css" href="css/style.css">

        <script>
            sap.ui.getCore().attachInit(function() {
            /*  new sap.m.Shell({
                    app: new sap.ui.core.ComponentContainer({
                        height : "100%",
                        name : "com.newproject.firstsapui5project"
                    })
                }).placeAt("content");*/
                var app = new sap.m.App({initialPage:"idView1"});
                var page1 = sap.ui.view({id:"idView1", viewName:"com.newproject.firstsapui5project.view.View1", type:sap.ui.core.mvc.ViewType.XML});
                app.addPage(page1);
            //  app.addDetailPage(page2);
                app.placeAt("content");
            });
        </script>
    </head>

    <body class="sapUiBody" id="content">
    </body>

</html>

Answer 1

View1没有被组件初始化，因此无法确定所有者。而不是明确地创建一个视图并将其放入DOM（index.html），创建一个sap.m.Shell，因为它是在注释代码中完成的。 Shell将创建一个组件，该组件将创建在manifest.json中指定的根视图。