OpenUI5:无法实例化模型

时间:2017-10-24 15:51:57

标签: javascript json web sapui5

正如在walkthroug的20课中所说,我正试图用Invoices.json实现模型。但结果我在列表中收到“无数据”。我已将我的所有资源与教程中的内容进行了比较,它们是相同的(不包括index.html中的网址)

据我了解,我使用的SDK版本是“1.48.10”(我在sap-ui-version.json中查看),因此实例应该可以正常工作。

这是我的index.html:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title>Walkthrough</title>
    <script src="http://localhost:63342/TestOprnUI5/resources/sap-ui-core.js"
            id="sap-ui-bootstrap"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-libs="sap.m"
            data-sap-ui-compatVersion="edge"
            data-sap-ui-preload="async"
            data-sap-ui-resourceroots='{
        "sap.ui.demo.wt": "./testoprnui5/"
        }'>
    </script>
    <script>
        sap.ui.getCore().attachInit(function () {
            new sap.m.Shell({
                app: new sap.ui.core.ComponentContainer({
                    name: "sap.ui.demo.wt"
                })
            }).placeAt("content");
        });
    </script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>

这是InvoiceList.view,xml:

<mvc:View
        xmlns="sap.m"
        xmlns:mvc="sap.ui.core.mvc">
    <List
            headerText="{i18n>invoiceListTitle}"
            class="sapUiResponsiveMargin"
            width="auto"
            items="{invoice>/Invoices}" >
        <items>
            <ObjectListItem
                    title="{invoice>Quantity} x {invoice>ProductName}"/>
        </items>
    </List>
</mvc:View>

这是App.view.xml:

<mvc:View
        controllerName="sap.ui.demo.wt.controller.App"
        xmlns="sap.m"
        xmlns:mvc="sap.ui.core.mvc"
        displayBlock="true">
    <App class="myAppDemoWT">
        <pages>
            <Page title="{i18n>homePageTitle}">
                <headerContent>
                    <Button
                            icon="sap-icon://hello-world"
                            press="onOpenDialog"/>
                </headerContent>
                <content>
                    <mvc:XMLView viewName="sap.ui.demo.wt.view.HelloPanel"/>
                    <mvc:XMLView viewName="sap.ui.demo.wt.view.InvoiceList"/>
                </content>
            </Page>
        </pages>
    </App>
</mvc:View>

这是component.js:

sap.ui.define([
    "sap/ui/core/UIComponent",
    "sap/ui/model/json/JSONModel",
    "sap/ui/demo/wt/controller/HelloDialog"
], function (UIComponent, JSONModel, HelloDialog) {
    "use strict";
    return UIComponent.extend("sap.ui.demo.wt.Component", {
        metadata: {
            manifest: "json"
        },
        init: function () {
            // call the init function of the parent
            UIComponent.prototype.init.apply(this, arguments);
            // set data model
            var oData = {
                recipient: {
                    name: "World"
                }
            };
            var oModel = new JSONModel(oData);
            this.setModel(oModel);
            // set dialog
            this._helloDialog = new HelloDialog(this.getRootControl());
        },
        openHelloDialog: function () {
            this._helloDialog.open();
        }
    });
});

这是项目结构:

TestOpenUI5
- resources
- testopenui5
-- controller
--- App.controller.js
--- HelloDialog.js
--- HelloPanel.controller.js
-- css
--- styles.css
-- i18n
--- i18n.properties
-- view
---  App.view.xml
---  HelloDialog.fragment.xml
---  HelloPanel.view.xml
---  InvoiceList.view.xml
-- Component.js
-- Invoices.json
-- manifest.json
- index.html
- Invoices.json

PS:我试图将Invoices.json放到不同的文件夹,根目录和/ testopenui5文件夹中,结果相同。 PPS:看起来发票不包括在模型中,但我如何检查确定?我在哪里可以找到一些日志?

2 个答案:

答案 0 :(得分:1)

您应该在manifest.json文件中设置模型。在models部分的sap.ui5部分,您应该添加三行代码。

  "invoice": {
    "type": "sap.ui.model.json.JSONModel",
    "uri": "Invoices.json"
  }

答案 1 :(得分:0)

是的,对不起,我没有仔细检查过我的manifest.json。 问题出在我发布的发票部分不在模型内部,而是在附近。 这就是我所拥有的:

"models": {
  "i18n": {
    "type": "sap.ui.model.resource.ResourceModel",
    "settings": {
      "bundleName": "sap.ui.demo.wt.i18n.i18n"
    }
  }
},
"invoice": {
    "type": "sap.ui.model.json.JSONModel",
    "uri": "Invoices.json"
  },
"resources": {
  "css": [
    {
      "uri": "css/style.css"
    }
  ]
}

应该是这样的:

"models": {
  "i18n": {
    "type": "sap.ui.model.resource.ResourceModel",
    "settings": {
      "bundleName": "sap.ui.demo.wt.i18n.i18n"
    }
  },
  "invoice": {
    "type": "sap.ui.model.json.JSONModel",
    "uri": "Invoices.json"
  }
},
"resources": {
  "css": [
    {
      "uri": "css/style.css"
    }
  ]
}