Question

我正在浏览sap ui5演练教程，并设法进入第9步，它教你如何在应用程序中使用Component.js文件。

现在，在使用Component.js之前，应用程序中的所有内容都运行良好。但是，一旦我尝试使用组件，我就会收到此错误：

Uncaught TypeError: this.getView is not a function

参考UIComponent.js第6行。即使我的组件文件只是名为Component.js。我也得到了：

GET http://localhost:58736/InvoicesApp/invoicesapp/Component-preload.js 404 (Not Found)

但我不确定他们是否相关

这是我的index.html

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

        <script src="resources/sap-ui-core.js"
                id="sap-ui-bootstrap"
                data-sap-ui-libs="sap.m"
                data-sap-ui-theme="sap_bluecrystal"
                data-sap-ui-bindingSyntax="complex"
                data-sap-ui-compatVersion="edge"
                data-sap-ui-preload="async"
                >
        </script>
        <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

        <script>
                sap.ui.localResources("invoicesapp");
                sap.ui.getCore().attachInit(function () {
                     new sap.ui.core.ComponentContainer({
                           name : "invoicesapp"
                        }).placeAt("content");

                 });
        </script>

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

我的Component.js

sap.ui.define([
   "sap/ui/core/UIComponent",
   "sap/ui/model/json/JSONModel",
   "sap/ui/model/resource/ResourceModel"
], function (UIComponent,  JSONModel, ResourceModel) {
   "use strict";
   return UIComponent.extend("invoicesapp.Component", {
       metadata: {
           rootView:"invoicesapp.view.App"
       },

      init : function () {
         // call the init function of the parent
         UIComponent.prototype.init.apply(this, arguments);

      // set data model on view
         var oData = {
            recipient : {
               name : "World"
            }
         };
         var oModel = new JSONModel(oData);
         this.getView().setModel(oModel);
     // set i18n model on view
         var i18nModel = new ResourceModel({
            bundleName: "invoicesapp.i18n.i18n"
         });
         this.getView().setModel(i18nModel, "i18n");
    }
   });
});

我的控制器

sap.ui.define([
   "sap/ui/core/mvc/Controller",
   "sap/m/MessageToast",
   "sap/ui/model/json/JSONModel",
   "sap/ui/model/resource/ResourceModel"
], function (Controller, MessageToast, JSONModel, ResourceModel) {
   "use strict";
   return Controller.extend("invoicesapp.controller.App", {

      onShowHello : function () {

         // read msg from i18n model
         var oBundle = this.getView().getModel("i18n").getResourceBundle();
         var sRecipient = this.getView().getModel().getProperty("/recipient/name");
         var sMsg = oBundle.getText("helloMsg", [sRecipient]);
         // show message
         MessageToast.show(sMsg);
      }
   });
});

Answer 1

在组件中，您无法调用this.getView（），因为没有getView（），https://openui5beta.hana.ondemand.com/#docs/api/symbols/sap.ui.core.Component.html处的api文档

相反，您可以直接在组件本身上设置模型。换句话说，只需致电

this.setModel(oModel);

和

this.setModel(i18nModel, "i18n");

顺便说一下：在walktrough中，它以同样的方式完成。

Answer 2

this.getView（）将不会在component.js中定义，因为视图尚未实例化。

您只需使用this.setModel（oModel）设置模型，就可以通过this.setModel（oModel，“modelName”）设置名称模型;

Answer 3

在完成漫步时我也遇到了同样的问题。

视图未在组件中实例化。

您可以重写为

this.setModel("myModel);

对于i18n

this.setModel(i18nModel,"i18n");

这个错误是在走过，但现在它似乎修复了。在我学习的时候，SAP UI5教程几乎没有错误，但现在已经修复了大部分错误。

这也是从UI5开始的好资源。几乎与Demokit相似。

UI Development Toolkit for HTML5 (SAPUI5)

快乐编码

Febin Dominic

SAP UI5 - 组件不工作（this.getView不是函数）

3 个答案: