SAPUI5将由对象组成的JSON模型绑定到sap.m。表

Question

我在将JSON模型绑定到sap.m.table时遇到问题。模型本身是通过一个数组生成的，该数组本身会在整个代码中填充，最后它由不同的对象组成。

这是对象数据的屏幕截图：

这种结构对我来说有点奇怪，因为我总是必须单击（...）才能看到实际的内容。

无论如何，我尝试将 labelName 和 uploadName 绑定到两列表。

<m:Table id="emptyColumnText" rows="{/emptyColModel}">
   <m:headerToolbar>
       <m:Toolbar height="2rem">
           <m:Title text="{i18n>excel.emptyColMessage}" />
        </m:Toolbar>
   </m:headerToolbar>
   <m:columns>
        <m:Column>
           <m:Text text="Excel Upload" />
        </m:Column>
        <m:Column>
           <m:Text text="InfoObject" />
        </m:Column>
     </m:columns>
     <items>
        <ColumnListItem>
           <cells>
               <Text text="{/uploadName}" /> //different approaches to 
               <Text text="{>labelName}" />  // see what works
           </cells>
         </ColumnListItem>
     </items>
</m:Table>

我已经尝试了将模型绑定到表项以及将upload- / labelName绑定到单元格的其他方法，但是我还没有成功。我也想在 view 中而不是在 controller 中完成所有绑定！

这是我设置模型的方式：

var emptyColMessage = new sap.ui.model.json.JSONModel(emptyCol, 'emptyColModel');
dialog.setModel(emptyColMessage); // a new dialog opens which should contain the model, so I thought I'd set the model to the dialog

这是 emptyCol 与一个条目的外观：

查看UI5检查器。我看到该表具有到/ emptyColModel的绑定，但是没有列出任何项目或指向正确绑定的任何内容。

那么如何正确绑定数据？我尝试了几次添加路径的尝试。

编辑

我只是查看了模型信息，发现mmodel数据看起来像这样：

所以我想，如果 uploadName 不是模型的实际属性，而只是一个字符串，访问它会很困难？

编辑2

有关@ TiiJ7帮助的更新

  if (emptyCol.length !== 0) {
     var emptyColMessage = new sap.ui.model.json.JSONModel({ emptyColModel: emptyCol });
      //    var emptyColMessage = new sap.ui.model.json.JSONModel(emptyCol, 'emptyColModel');
   }
   if (randomMatch.length !== 0) {
      var randomMatchMessage = new sap.ui.model.json.JSONModel({ randomColModel: randomMatch });
   }
   if (matchedColumn.length !== 0) {
        var matchedColumnMessage = new sap.ui.model.json.JSONModel({ matchedColModel: matchedColumn });
   }
   dialog.setModel(emptyColMessage, 'emptyColModel');
   dialog.setModel(randomMatchMessage, 'randomColModel');
   dialog.setModel(matchedColumnMessage, 'matchedColModel');

我的第一个表的xml代码：

                             <m:Table id="emptyColumnText" items="{/emptyColModel}">
                                <m:headerToolbar>
                                    <m:Toolbar height="2rem">
                                        <m:Title text="{i18n>excel.emptyColMessage}" />
                                    </m:Toolbar>
                                </m:headerToolbar>
                                <m:columns>
                                    <m:Column>
                                        <m:Text text="Excel Upload" />
                                    </m:Column>
                                    <m:Column>
                                        <m:Text text="InfoObject" />
                                    </m:Column>
                                </m:columns>
                                <m:items>
                                    <m:ColumnListItem>
                                        <m:cells>
                                            <m:Text text="{/emptyColModel>labelName}" /> //I again tried different solutions
                                           <m:Text text="{uploadName}" />
                                        </m:cells>
                                    </m:ColumnListItem>
                                </m:items>

                            </m:Table>

Answer 1

您绑定了表的属性“ rows”，但是sap.m.Table没有rows，它有items。其次，您的数据（emptyCol）似乎是一个数组。虽然您可以直接将其设置为JSONModel的数据，但建议将其包装在一个对象中，以便为它提供适当的密钥。然后，您可以使用此键映射项目（如果直接将数组设置为模型，则必须将其映射为“ {/}”）。

这是我制作的一个小型工作示例，并带有一些其他注释（注意：在这种情况下，我将模型设置为视图，但对话框应该相同）：

var emptyCol = [{
  key: false,
  labelName: "Beschreibung lang",
  technicalName: "COL04",
  uploadName: "EMPTY_COLUMN_1"
}];

sap.ui.define("myController", [
  "sap/ui/core/mvc/Controller",
  "sap/ui/model/json/JSONModel"
], function(Controller, JSONModel) {
  "use strict";

  return Controller.extend("myController", {
    onInit: function() {
      // Wrap the array with an object and give it a key (I chose "myItems" for this example)
      // Also note there is no second parameter to a JSONModel
      var oModel = new JSONModel({ myItems : emptyCol });
      this.getView().setModel(oModel);
    }
  });
});

sap.ui.require(["sap/ui/core/mvc/XMLView"], function(XMLView) {
  XMLView.create({
    definition: $('#myView').html()
  }).then(function(oView) {
    oView.placeAt('content');
  });
});

<html>

  <head>
    <meta charset="utf-8">
    <script id='sap-ui-bootstrap' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-libs='sap.m'></script>
    <script id="myView" type="sapui5/xmlview">
      <mvc:View controllerName="myController" xmlns:mvc="sap.ui.core.mvc" xmlns:m="sap.m">
        <m:Table id="emptyColumnText" items="{/myItems}">
          <m:headerToolbar>
            <m:Toolbar height="2rem">
              <m:Title text="{i18n>excel.emptyColMessage}" />
            </m:Toolbar>
          </m:headerToolbar>
          <m:columns>
            <m:Column>
              <m:Text text="Excel Upload" />
            </m:Column>
            <m:Column>
              <m:Text text="InfoObject" />
            </m:Column>
          </m:columns>
          <!-- Also: be consistent with your "m:" prefixing -->
          <m:items>
            <m:ColumnListItem>
              <m:cells>
                <!-- These are the correct relative mappings -->
                <m:Text text="{uploadName}" />
                <m:Text text="{labelName}" />
              </m:cells>
            </m:ColumnListItem>
          </m:items>
        </m:Table>
      </mvc:View>
    </script>
  </head>

  <body class='sapUiBody'><div id='content'></div></body>
</html>

编辑

如果需要为多个表使用多个模型，则需要为每个模型赋予自己的名称（如在编辑中正确完成的一样）。为了访问数据，您只需要在视图中添加正确的前缀（以yourModel>...的形式）。在所有绑定中都这样做很重要（因此，对于items和text都必须这样做）。这是一个经过修改的示例：

var emptyCol = [{
  key: false,
  labelName: "Beschreibung lang",
  technicalName: "COL04",
  uploadName: "EMPTY_COLUMN_1"
}];

sap.ui.define("myController", [
  "sap/ui/core/mvc/Controller",
  "sap/ui/model/json/JSONModel"
], function(Controller, JSONModel) {
  "use strict";

  return Controller.extend("myController", {
    onInit: function() {
      var oModel = new JSONModel({ emptyColModel: emptyCol });
      // Add model name in setter
      this.getView().setModel(oModel, 'emptyColModel');
    }
  });
});

sap.ui.require(["sap/ui/core/mvc/XMLView"], function(XMLView) {
  XMLView.create({
    definition: $('#myView').html()
  }).then(function(oView) {
    oView.placeAt('content');
  });
});

<html>

  <head>
    <meta charset="utf-8">
    <script id='sap-ui-bootstrap' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-libs='sap.m'></script>
    <script id="myView" type="sapui5/xmlview">
      <mvc:View controllerName="myController" xmlns:mvc="sap.ui.core.mvc" xmlns:m="sap.m">
        <!-- Name of model added below -->
        <!-- Note: first "emptyColModel" is the name of the model, the second is the name of the key you chose (which is the same in this case) -->
        <m:Table id="emptyColumnText" items="{emptyColModel>/emptyColModel}">
          <m:headerToolbar>
            <m:Toolbar height="2rem">
              <m:Title text="{i18n>excel.emptyColMessage}" />
            </m:Toolbar>
          </m:headerToolbar>
          <m:columns>
            <m:Column>
              <m:Text text="Excel Upload" />
            </m:Column>
            <m:Column>
              <m:Text text="InfoObject" />
            </m:Column>
          </m:columns>
          <m:items>
            <m:ColumnListItem>
              <m:cells>
                <!-- Name of model added below -->
                <m:Text text="{emptyColModel>uploadName}" />
                <m:Text text="{emptyColModel>labelName}" />
              </m:cells>
            </m:ColumnListItem>
          </m:items>
        </m:Table>
      </mvc:View>
    </script>
  </head>

  <body class='sapUiBody'><div id='content'></div></body>
</html>