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>

我已经尝试了不同的方法来将模型绑定到表格项，并将上传/标签名称绑定到单元格，但我还没有成功。我还想在 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 的数据，但我建议将其包装在一个对象中，以便您可以给它一个适当的密钥。然后，您可以使用此键映射项目（如果您直接将数组设置为模型，则必须将其映射为“{/}”）。

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

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>