我的 select 元素没有填充模型数据
My select element doesn't get populated with model data
我正在编写一个小型 OpenUI5 应用程序。我想将模型(具有 key/text 值的列表)附加到 sap.m.Select
元素(下拉框)。
但是,无论我是为模型使用静态数据还是通过 ajax 获取数据, select 元素仍然是空的,没有显示下拉列表。我以为我遵循了 examples/tutorials 但我看不出问题是什么。
index.html:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Q Ui5 POC</title>
<script id="sap-ui-bootstrap" src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-async="true"
data-sap-ui-onInit="module:de/xx/qpoc/index"
data-sap-ui-resourceroots='{ "de.xx.qpoc": "./" }'
></script>
</head>
<body id="content" class="sapUiBody"></body>
</html>
index.js:
sap.ui.define([
"sap/ui/core/mvc/XMLView",
], function (XMLView) {
"use strict";
XMLView.create({
id: "qpocMainView",
viewName: "de.xx.qpoc.view.App",
}).then(function(oView) {
oView.placeAt("content");
});
});
App.view.xml:
<mvc:View controllerName="de.xx.qpoc.controller.App"
xmlns="sap.m"
xmlns:layout="sap.ui.layout"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true">
<layout:VerticalLayout>
<Select
enabled="true"
editable="false"
forceSelection="false"
items="{
path: '/clientList',
sorter: { path: 'text' }
}">
<core:Item key="{key}" text="{text}" />
</Select>
</layout:VerticalLayout>
</mvc:View>
App.controller.js:
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
], function (Controller, JSONModel) {
"use strict";
return Controller.extend("de.xx.qpoc.controller.App", {
onInit: function() {
var viewData = {
"clientList": [
{ key: 'key1', text: 'text1'},
{ key: 'key2', text: 'text2'},
]
};
var oModel = new JSONModel(viewData);
this.getView ().setModel(oModel);
}
});
});
我删除了所有不相关的 UI 元素和应用程序逻辑。我的理解是我在控制器的 onInit
方法中进行绑定。而且我可以引用传递给 UI 元素 (/clientList
).
中的 JSONModel 构造函数的 JSON 结构的键
生成的 UI 如下所示:
删除 XML 视图中的这两行或将它们设置为 true
(默认值):
editable="false"
→ 使控件非交互
forceSelection="false"
→ none 的选项将被初步选中
您确实有数据绑定。只是设置阻止了它们显示。
我正在编写一个小型 OpenUI5 应用程序。我想将模型(具有 key/text 值的列表)附加到 sap.m.Select
元素(下拉框)。
但是,无论我是为模型使用静态数据还是通过 ajax 获取数据, select 元素仍然是空的,没有显示下拉列表。我以为我遵循了 examples/tutorials 但我看不出问题是什么。
index.html:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Q Ui5 POC</title>
<script id="sap-ui-bootstrap" src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-async="true"
data-sap-ui-onInit="module:de/xx/qpoc/index"
data-sap-ui-resourceroots='{ "de.xx.qpoc": "./" }'
></script>
</head>
<body id="content" class="sapUiBody"></body>
</html>
index.js:
sap.ui.define([
"sap/ui/core/mvc/XMLView",
], function (XMLView) {
"use strict";
XMLView.create({
id: "qpocMainView",
viewName: "de.xx.qpoc.view.App",
}).then(function(oView) {
oView.placeAt("content");
});
});
App.view.xml:
<mvc:View controllerName="de.xx.qpoc.controller.App"
xmlns="sap.m"
xmlns:layout="sap.ui.layout"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true">
<layout:VerticalLayout>
<Select
enabled="true"
editable="false"
forceSelection="false"
items="{
path: '/clientList',
sorter: { path: 'text' }
}">
<core:Item key="{key}" text="{text}" />
</Select>
</layout:VerticalLayout>
</mvc:View>
App.controller.js:
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
], function (Controller, JSONModel) {
"use strict";
return Controller.extend("de.xx.qpoc.controller.App", {
onInit: function() {
var viewData = {
"clientList": [
{ key: 'key1', text: 'text1'},
{ key: 'key2', text: 'text2'},
]
};
var oModel = new JSONModel(viewData);
this.getView ().setModel(oModel);
}
});
});
我删除了所有不相关的 UI 元素和应用程序逻辑。我的理解是我在控制器的 onInit
方法中进行绑定。而且我可以引用传递给 UI 元素 (/clientList
).
生成的 UI 如下所示:
删除 XML 视图中的这两行或将它们设置为 true
(默认值):
editable="false"
→ 使控件非交互forceSelection="false"
→ none 的选项将被初步选中
您确实有数据绑定。只是设置阻止了它们显示。