SAP UI5 XML视图数据绑定

Question

我试图弄清楚如何在控制器的sap.m.CustomListItem期间将数据绑定到onInit。我尝试了很多，但似乎都不合适。在UI5演示工具包中的示例上看起来非常简单。

<mvc:View
  height="100%"
  controllerName="sap.ui.demo.toolpageapp.controller.settings.MasterSettings"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m">
  <List>
    <items items="{folder>objects}">
      <CustomListItem items="{folder>/object/properties/cmis:name/value}">
        <Link id="text6"
          maxLines="0"
          text="{folder>/object/properties/['cmis:objectId']/displayName}" />
        <OverflowToolbar id="otbFooter">
          <Button type="Accept" text="Accept">
            <layoutData>
              <OverflowToolbarLayoutData priority="NeverOverflow" />
            </layoutData>
          </Button>
          <Button type="Reject" text="Reject">
            <layoutData>
              <OverflowToolbarLayoutData priority="NeverOverflow" />
            </layoutData>
          </Button>
        </OverflowToolbar>
        <SearchField/>
      </CustomListItem>
    </items>
  </List>
</mvc:View>

sap.ui.define([
  "sap/ui/demo/toolpageapp/controller/BaseController",
  "sap/m/MessageToast",
  "sap/ui/model/json/JSONModel",
  "sap/ui/demo/toolpageapp/model/formatter"
], function(BaseController, MessageToast, JSONModel, formatter) {
  "use strict";
  var cmisRootFolder;
  var children;

  return BaseController.extend("sap.ui.demo.toolpageapp.controller.settings.MasterSettings", {
    formatter: formatter,
    onInit: function() {
      getCMISFolderStructure();
      var oModel = new JSONModel(cmisRootFolder);
      this.setModel(oModel, "folder");
      console.log(oModel);

      function processRootFolder(data) {
        cmisRootFolder = data;
      }

      function getCMISFolderStructure() {
        $.ajaxSetup({
          headers: {
            "Access-Control-Allow-Origin": "*"
          }
        });
        const session = new cmis.createSession("http://localhost:8080/myTest/browser");
        session.setCredentials('test', 'test').getFolderTree("rfHN5c3RlbXwxfHJlcG8xfC8=", 2, {
          request: {
            async: false,
            success: processRootFolder,
            error: function(e) {
              if (e)
                console.log(false, "Error during the request: " + e);
              else
                console.log(false, "Error during the request: " + e);
            }
          }
        })
      }
    },

    onMasterPressed: function(oEvent) {
      var oContext = oEvent.getParameter("listItem").getBindingContext("side");
      var sPath = oContext.getPath() + "/selected";
      oContext.getModel().setProperty(sPath, true);
      var sSelectedMasterElement = oContext.getProperty("title");
      var sKey = oContext.getProperty("key");
      switch (sSelectedMasterElement) {
        case "System Settings": {
          this.getRouter().navTo(sKey);
          break;
        }
        default: {
          MessageToast.show(sSelectedMasterElement + " was pressed");
          break;
        }
      }
    },

    onToggleOpenState: function(oEvent) {
      var iItemIndex = oEvent.getParameter("itemIndex");
      var oItemContext = oEvent.getParameter("itemContext");
      var bExpanded = oEvent.getParameter("expanded");
      MessageToast.show("Item index: " + iItemIndex +
        "\nItem context (path): " + oItemContext +
        "\nExpanded: " + bExpanded, {
          duration: 5000,
          width: "auto"
        });
      var oTree = this.byId("Tree");
      var oModel = this.getView().getModel();
      var sPath = oItemContext.getPath();
      var bChildIsDummyNode = oModel.getProperty(sPath + "/nodes/0").dummy === true;
      if (bExpanded && bChildIsDummyNode) {
        this.loadData(oModel, sPath, oTree.getItems()[iItemIndex].getLevel());
      }
    },

    loadData: function(oModel, sPath, iLevel) {
      var oTree = this.byId("Tree");

      function processRootFolder(data) {
        cmisRootFolder = data;
      }
      $.ajaxSetup({
        headers: {
          "Access-Control-Allow-Origin": "*"
        }
      });
      const session = new cmis.createSession("http://localhost:8080/myTest/browser");
      session.setCredentials('test', 'test').getFolderTree("rfHN5c3RlbXwxfHJlcG8xfC8=", 2, {
          request: {
            async: false,
            success: processRootFolder,
            error: function(e) {
              if (e)
                console.log(false, "Error during the request: " + e);
              else
                console.log(false, "Error during the request: " + e);
            }
          }
        }),
        // In this example we are just pretending to load data from the backend.
        //oTree.setBusy(true);
        setTimeout(function() {
          var aNewNodes = [cmisRootFolder];
          oModel.setProperty(sPath ? sPath + "/nodes" : "/", aNewNodes);
          //oTree.setBusy(false);
          console.log(oModel);
        }, 2000);
    },

    onSavePressed: function() {
      MessageToast.show("Save was pressed");
    },

    onCancelPressed: function() {
      MessageToast.show("Cancel was pressed");
    },

    onNavButtonPress: function() {
      this.getOwnerComponent().myNavBack();
    }
  });
});

我在互联网上找到了一个例子，看起来正是我所需要的。这就是您在上面的代码示例中看到的。但这不起作用。

Answer 1

您在哪里找到代码段？错误太多。

items="{folder>objects}"

视图中的绑定路径需要更正。根据您的数据，该路径应该为items="{folder>/objects}"，即absolute绑定路径（>之后的斜杠缺失）。

---

<items items="{folder>objects}">

命名的聚合节点不能具有聚合绑定。仅ManagedObjects（控件）支持绑定属性，聚合和上下文。将聚合绑定移到<List>。

---

<CustomListItem items="{...}">

[sap.m.CustomListItem根本没有sap.m.CustomListItem-聚合。

---

items

根据您的数据，text="{folder>/object/properties/['cmis:objectId']/displayName}" 不是数组而是对象，因此您无法应用类似xpath的语法，例如properties。另外，您可以利用传递给子级的上下文（聚合绑定的结果）。无需分配absolute绑定路径。删除/['cmis:objectId']/之后的第一个斜杠，使其成为relative。

---

TL; DR

尝试使用：

>

• <List items="{folder>/objects}">
    <CustomListItem>
      <Link text="{folder>properties/cmis:objectId/displayName}" />
      <!-- ... -->
    </CustomListItem>
  </List>

• Tutorial: Data Binding