正如在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:看起来发票不包括在模型中,但我如何检查确定?我在哪里可以找到一些日志?
答案 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"
}
]
}