SAP UI5 XML 查看数据绑定语法

Question

我试图弄清楚如何在我的控制器 onInit 期间将数据绑定到 sap.m.CustomListItem。我尝试了很多，但似乎没有什么合适的。在 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><strong>/</strong>objects}" 即 absolute绑定路径（缺少 > 后的斜杠）。

Documentation: Binding Path

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

命名聚合节点不能有聚合绑定。只有 ManagedObjects（控件）支持绑定属性、聚合和上下文。将聚合绑定移动到 <List>.

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

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

text="{folder>/object/properties/['cmis:objectId']/displayName}"

根据您的数据，properties 不是一个数组而是一个对象，因此您不能应用类似 xpath 的语法，例如 /['cmis:objectId']/。此外，您可以使用传递给子项的上下文（由聚合绑定产生）。无需分配绝对绑定路径。
删除 > 后的第一个斜杠，使其成为 relative.

TL;DR

试试：

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

SAP UI5 XML 查看数据绑定语法

SAP UI5 XML View Data Binding syntax

sapui5

TL;DR