我的 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 的选项将被初步选中

您确实有数据绑定。只是设置阻止了它们显示。