时间戳

首页 > 解决方案 > SAPUI5 - loading source library in component.js

javascript - SAPUI5 - loading source library in component.js

问题描述

I am trying to use mobx (to use the observable pattern) inside my SAPUI5 fiori webapplication.

For that purpose I have made a simple test project with the following example: mobx example this works fine.

Now my problem is, that my application will run in the fiori launchpad. Since I know, the index.html file will not be loaded, when the application runs in the launchpad.

So the following parts should somehow be loaded in the component.js file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/mobx/3.0.2/mobx.umd.js" type="application/javascript"></script>

and

data-sap-ui-resourceroots='{
                "sap.ui.mobx": "test.project/libs/mobx/src",
                "test.project": "./"
                }'

I have so far searched for solutions, but I could not find a clear instruction.

So does anyone know how I can load and define the mobx library in the component.js file, like i do it in the index.html?

index.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>project</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/mobx/3.0.2/mobx.umd.js" type="application/javascript"></script>
        <script id="sap-ui-bootstrap"
            src="resources/sap-ui-core.js"
            data-sap-ui-theme="sap_belize"
            data-sap-ui-resourceroots='{
                "sap.ui.mobx": "test.project/libs/mobx/src",
                "test.project": "./"
                }'
            data-sap-ui-compatVersion="edge"
            data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
            data-sap-ui-async="true"
            data-sap-ui-frameOptions="trusted">
        </script>
    </head>
    <body class="sapUiBody">
        <div data-sap-ui-component data-name="test.project" data-id="container" data-settings='{"id" : "project"}'></div>
    </body>
</html>

component.js:

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

    return UIComponent.extend("test.project.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);

            // enable routing
            this.getRouter().initialize();

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

I don't know how the component.js file should look like, where do I have to include the libraries and define the namespace sap.ui.mobx?

Any help is appreciated, thanks.

标签： javascriptsapui5mobxsap-fiori

解决方案

如果您像这样修改 component.js 中的定义部分，它是否有效：

sap.ui.define([
    "sap/ui/core/UIComponent",
    "sap/ui/Device",
    "sap/ui/mobx",
    "test/project/model/models"
], function (UIComponent, Device, models) {
    "use strict";

以下链接也可能有帮助： 将 SRC 从 Index.html 移动到 Component ui5 包含外部 js 库的方法有多种：

1) 包含在您使用该库的 UI5 控制器中。

sap.ui.define([ "sap/ui/core/mvc/Controller", "//moment.js" ], function(Controller){ .... 在这里使用 moment() .... }

2) 包含在 Component.js 中，如 1 所示。到此“时刻”将通过应用程序可用。虽然下一个选项是首选。

3) 在您的应用程序的 manifest.json 中提及（在 manifest.json --> sap.ui5 --> 资源中）。此选项还允许您在整个应用程序中使用“时刻”。“sap.ui5”：{“资源”：{“js”：[{“uri”：“/moment.js”}]}}

4）清单.json

5) jQuery.sap.require('namespace.folder.fileName')

推荐阅读