聚合绑定：如何将具有不同聚合绑定的不同控件放入已经具有聚合绑定的控件中答案

【问题标题】：Aggregation Binding: How to Put Different Control with Different Aggregation Binding inside the Control which Already Has Aggregation Binding聚合绑定：如何将具有不同聚合绑定的不同控件放入已经具有聚合绑定的控件中
【发布时间】：2018-01-03 00:44:47
【问题描述】：

我的模型中有以下数据：

{
  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 标签。

我考虑过使用一个表单控件，它聚合绑定到formElements="{/vertexattributes}"，然后每个表单元素从vertexAttributes 绑定到"{COLUMN_NAME}"。但是现在，我想将具有聚合绑定的 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，因为我遇到了一个错误。不完全确定它是什么。
另外，我使用列表来显示完整值，而不是选择/下拉列表。

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

【问题讨论】：

标签： sapui5

【解决方案1】：

这是一个工作示例：

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")));

<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>

您的数据结构的设计有些问题。值（vertexAttributes/COLUMN_NAME）是其他对象中的键（vertexTable/*）这一事实使得实现变得复杂。尽管如此，正如您之前已经尝试过的，使用工厂函数仍然可以显示适当的数据。

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

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

【讨论】：

vertexAttributes/Column_Name 的值不是 vertexTable 的键，它指的是顶点表中的所有列标题。我的顶点表如下所示：NAME | TYPE | RESIDENCE Oceanus | titan | Orthys Tethty | titan | Orthys 所以想法是将标签显示为列标题，列表显示为列中的关联值。感谢您的回复，我无法让工厂功能运行。我会试试你的解决方案。 :) 也感谢您提供 templateShareable 链接。