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

Question

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

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

我觉得这个结构有点奇怪，因为我总是必须单击 (...) 才能看到实际内容。

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

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

我已经尝试了不同的方法将模型绑定到 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 检查器。我看到，table 具有到 /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 第一个代码 table:

                             <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

您绑定了table的属性“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>

编辑

如果您需要为多个 table 设置多个模型，则需要为每个模型指定自己的名称（正如您在编辑中所做的那样）。为了访问数据，您只需在视图中添加正确的前缀（以 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>

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

SAPUI5 bind JSON Model consisting of objects to sap.m. Table

data-binding

json

property-binding

jsonmodel

sapui5

编辑