Question

我的模型中有以下数据：

{
  vertexTable: [
    {
      "NAME": "Tethys",
      "TYPE":"titan",
      "RESIDENCE":"Othrys"
    },
    {
      "NAME": "Oceanus",
      "TYPE": "titan",
      "RESIDENCE": "Othrys"
    }
  ],
  vertexAttributes: [
    {
      "COLUMN_NAME": "NAME",
      "DATA_TYPE_NAME": "VARCHAR"
    },
    {
      "COLUMN_NAME": "TYPE",
      "DATA_TYPE_NAME": "VARCHAR"
    },
    {
      "COLUMN_NAME": "RESIDENCE",
      "DATA_TYPE_NAME": "VARCHAR"
    }
  ]
}

我想在我的视图中显示这些数据，以便有来自vertexAttributes/COLUMN_NAME的标签，并且每个标签都有一个相关的下拉/选择框来自..

vertexTable/NAME代表 NAME 标签，
vertexTable/TYPE代表 TYPE 标签和
vertexTable/RESIDENCE代表 RESIDENCE 标签。

我考虑过使用一个Form控件，它具有聚合绑定到formElements="{/vertexattributes}"，然后每个表单元素绑定到"{COLUMN_NAME}" vertexAttributes。但现在，我想将具有聚合绑定的Select控件放到vertexTable，然后绑定到NAME，TYPE和RESIDENCE的项。

以下是我在视图中尝试的代码：

<f:form>
  <f:FormContainer formElements="{/vertexAttributes}">
    <f:FormElement label="{COLUMN_NAME}">
      <List id="values" items="{path: 'VALUES', templateShareable: false}">
        <StandardListItem title="{value}"></StandardListItem>
      </List>
    </f:FormElement>
  </f:FormContainer>
</f:form>

我不得不使用templateShareable因为我收到了错误。不完全确定它是什么。
此外，我使用List来显示完整的值，而不是选择/下拉列表。

这是正确的方法还是有更好的方法？我遇到了工厂功能，但我无法实现它。

Answer 1

这是一个有效的例子：

＆＃13;

sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/ui/model/json/JSONModel",
  "sap/ui/layout/form/FormElement",
  "sap/m/Label",
  "sap/m/Select",
  "sap/ui/core/Item",
], (JSONModel, FormElement, Label, Select, Item) => sap.ui.xmlview({

  viewContent: `<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:form="sap.ui.layout.form"
    xmlns="sap.m"
    controllerName="demo.MyController"
  >
    <form:Form editable="true">
      <form:layout>
        <form:ResponsiveGridLayout/>
      </form:layout>
      <form:FormContainer
        formElements="{
          path: '/vertexAttributes',
          factory: '.createFormElement'
        }"
      />
    </form:Form>
  </mvc:View>`,

  controller: sap.ui.controller("demo.MyController", {
    createFormElement: function(id, context) {
      const columnName = context.getProperty("COLUMN_NAME");
      return new FormElement(id).setLabel(new Label({
        text: columnName,
      })).addField(new Select().bindItems({
        path: "/vertexTable",
        template: new Item().bindProperty("text", columnName),
      }));
    },
  }),

}).setModel(new JSONModel({
  vertexTable: [{
      "NAME": "Tethys",
      "TYPE": "Titan1",
      "RESIDENCE": "Othrys1"
    },
    {
      "NAME": "Oceanus",
      "TYPE": "Titan2",
      "RESIDENCE": "Othrys2"
    },
  ],
  vertexAttributes: [{
      "COLUMN_NAME": "NAME",
      "DATA_TYPE_NAME": "VARCHAR"
    },
    {
      "COLUMN_NAME": "TYPE",
      "DATA_TYPE_NAME": "VARCHAR"
    },
    {
      "COLUMN_NAME": "RESIDENCE",
      "DATA_TYPE_NAME": "VARCHAR"
    },
  ]
})).placeAt("content")));

＆＃13;

<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap"
  data-sap-ui-libs="sap.ui.layout, sap.m, sap.ui.core"
  data-sap-ui-preload="async"
  data-sap-ui-theme="sap_belize"
  data-sap-ui-compatVersion="edge"
  data-sap-ui-resourceRoots='{"demo": "./"}'
  data-sap-ui-xx-waitForTheme="true"></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>

＆＃13;

您的数据结构设计有点值得怀疑。值（vertexAttributes/COLUMN_NAME）是其他对象中的键（vertexTable/*）的事实使得实现变得复杂。尽管如此，正如您之前已经尝试过的那样，使用工厂功能仍然可以显示相应的数据。

上面的示例在createFormElement调用的每次迭代中创建一个Select控件。然后，select项可以将其文本与当前columnName绑定为路径。

关于templateShareable：https://stackoverflow.com/a/47734086/5846045

聚合绑定：如何在具有聚合绑定的控件内放置具有不同聚合绑定的不同控件

1 个答案: