SAPUI5 привязывает модель JSON, состоящую из объектов, к sap.m. Таблица - PullRequest
Новая
       55

SAPUI5 привязывает модель JSON, состоящую из объектов, к sap.m. Таблица

1 голос
/ 06 мая 2019

У меня проблема с привязкой моей модели JSON к sap.m.table.Сама модель генерируется через массив, который сам заполняется в коде, и в конце концов он состоит из различных объектов.

Вот снимок экрана данных объекта:

Example data.

Эта структура кажется мне несколько странной, поскольку мне всегда приходится нажимать на (...) , чтобы увидеть фактическое содержание.

В любом случае, я пытаюсь привязать 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>

Я уже пробовал разные подходы при привязке Model к элементам таблицы, а также привязке upload- / labelName к ячейкам, но я пока не добился успеха.Также я хотел бы выполнить все мои привязки в представлении , а не в контроллере !

Вот как я устанавливаю свою модель: 

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 выглядит с одной записью: emptyCol array

Просмотр инспектора UI5.Я вижу, что таблица имеет привязку к / emptyColModel, но нет ни одного элемента в списке или чего-либо, что указывает на правильную привязку.

existing binding of my table

no ColumnListItems

Итак, как правильно связать мои данные?Я перепробовал несколько попыток добавить путь.

Редактировать

Я только что посмотрел информацию о модели и понял, что данные mmodel выглядят так:

model data

Так что я думаю, что получить доступ к uploadName довольно сложно, если это не фактическое свойство модели, а только строка?

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

1 Ответ

1 голос
/ 06 мая 2019

Вы связываете свойство "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>

EDIT

Если вам нужно иметь несколько моделей для нескольких таблиц, вам нужно будет дать каждой модели свое имя (как вы правильно сделали при редактировании). Для доступа к данным вам просто нужно добавить правильные префиксы в вашем представлении (в виде 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>
...