如何加载新的平铺视图，其中源是 json 文件中的对象数组

Question

我有 StandrdTiles 和 JSON（下面的示例）。我的问题与 JSON 文件结构和图块集合路径有关（在 XML 视图中定义）。我尝试具有如下功能：如果您单击图块，新视图将加载另一组图块，其中模型将从 JSON 文件中选择数组（基于某些参数）。因此，我想加载新视图，单击图块，其中模型是通过带有对象的数组名称 (tile0 --> view + data0 collection; tile1 --> view + data1 collection) 选择的。

可以从控制器动态更改 XML 视图中的 tiles 值吗？

<TileContainer
    id="container"
    tiles="{}" <-- how to change value from controller before loading data?
...

data.json

{
  "TileCollection": [{
    "data0": [{
      "icon": "sap-icon://inbox",
      "number": "1",
      "title": "Lorem ipsum",
      "info": "Lorem ipsum",
      "infoState": "Error"
    }, {
      "icon": "sap-icon://technical-object",
      "number": "2",
      "title": "Lorem ipsum",
      "info": "Lorem ipsum",
      "infoState": "Success"
    }, {
      "icon": "sap-icon://inbox",
      "number": "3",
      "numberUnit": "",
      "title": "Lorem ipsum",
      "info": "Lorem ipsum"
    }]
  }, {
    "data1": [{
      "icon": "sap-icon://inbox",
      "number": "4",
      "title": "Lorem ipsum",
      "info": "Lorem ipsum",
      "infoState": "Error"
    }, {
      "icon": "sap-icon://technical-object",
      "number": "5",
      "title": "Lorem ipsum",
      "info": "Lorem ipsum",
      "infoState": "Success"
    }, {
      "icon": "sap-icon://inbox",
      "number": "6",
      "numberUnit": "",
      "title": "Lorem ipsum",
      "info": "Lorem ipsum"
    }]
  }]
}

Answer 1

这听起来像是主从类型的场景，您可以在其中使用路由。这是在 Full-Screen 应用程序中使用 SAPUI5 路由的 Detailed example。我会尽量总结一下...

在您的 JSON 中，为每个 Tile 分配一个 ID 并假设 "data..." 的内容每个图块视图，如果您需要向图块添加内容，它们可以进入与其 ID 相同的级别，ID 将用作路由的模式：

{
  "TileCollection": [{
    "homeId": 0,
    "homeIcon": "sap-icon://waiver",
    "homeType": "Create",
    "homeNumber": 160,
    "homeNumberUnit": "£",
    "homeTitle": "Home-Waiver",
    "homeInfo": "Lorem ipsum",
    "homeInfoState": "Success",
    "home0Data": [{
      "home0Id": 0,
      "home0Icon": "sap-icon://loan",
      "home0Type": "Create",
      "home0Number": "0-1",
      "home0NumberUnit": "T",
      "home0Title": "Home-LevelOne-Loan",
      "home0Info": "Lorem ipsum",
      "home0InfoState": "Success",
      "home0Properties": [{
        "propId": 0,
        "text0": "Home-LevelTwo-Visit SAP Homepage 01",
        "url": "http://www.sap.com",
        "icon": "sap-icon://menu"
      }, {
        "propId": 1,
        "text0": "Home-LevelTwo-Visit SAP Homepage 02",
        "url": "http://www.sap.com",
        "icon": "sap-icon://menu"
      }, {
        "propId": 2,
        "text0": "Home-LevelTwo-Visit SAP Homepage 03",
        "url": "http://www.sap.com",
        "icon": "sap-icon://menu"
      }]
    }, {
      "home0Id": 1,
      "home0Icon": "sap-icon://money-bills",
      "home0Type": "Create",
      "home0Number": "1-1",
      "home0NumberUnit": "T",
      "home0Title": "Home-LevelOne-Money",
      "home0Info": "Lorem ipsum",
      "home0InfoState": "Success",
      "home0Properties": [{
        "propId": 0,
        "text0": "Home-LevelTwo-Visit SAP Homepage 11",
        "url": "http://www.sap.com",
        "icon": "sap-icon://menu"
      }, {
        "propId": 1,
        "text0": "Home-LevelTwo-Visit SAP Homepage 12",
        "url": "http://www.sap.com",
        "icon": "sap-icon://menu"
      }, {
        "propId": 2,
        "text0": "Home-LevelTwo-Visit SAP Homepage 13",
        "url": "http://www.sap.com",
        "icon": "sap-icon://menu"
      }]
    }]
  }, {
    "homeId": 1,
    "homeIcon": "sap-icon://wallet",
    "homeType": "Create",
    "homeNumber": 200,
    "homeNumberUnit": "£",
    "homeTitle": "Home-Wallet",
    "homeInfo": "Lorem ipsum",
    "homeInfoState": "Warning",
    "home0Data": [{
      "home0Id": 0,
      "home0Icon": "sap-icon://receipt",
      "home0Type": "Create",
      "home0Number": "0-1",
      "home0NumberUnit": "T",
      "home0Title": "Home-LevelOne-Receipt",
      "home0Info": "Lorem ipsum",
      "home0InfoState": "Warning",
      "home0Properties": [{
        "propId": 0,
        "text0": "Home-LevelTwo-Visit SAP Homepage 11",
        "url": "http://www.sap.com",
        "icon": "sap-icon://menu"
      }, {
        "propId": 1,
        "text0": "Home-LevelTwo-Visit SAP Homepage 12",
        "url": "http://www.sap.com",
        "icon": "sap-icon://menu"
      }, {
        "propId": 2,
        "text0": "Home-LevelTwo-Visit SAP Homepage 13",
        "url": "http://www.sap.com",
        "icon": "sap-icon://menu"
      }]
    }]
  }, {
    "homeId": 2,
    "homeIcon": "sap-icon://credit-card",
    "homeType": "Create",
    "homeNumber": 350,
    "homeNumberUnit": "£",
    "homeTitle": "Home-Credit-Card",
    "homeInfo": "Lorem ipsum",
    "homeInfoState": "Error",
    "home0Data": [{
      "home0Id": 0,
      "home0Icon": "sap-icon://account",
      "home0Type": "Create",
      "home0Number": "3-1",
      "home0NumberUnit": "£",
      "home0Title": "Home-LevelOne-Account",
      "home0Info": "Lorem ipsum",
      "home0InfoState": "Error",
      "home0Properties": [{
        "propId": 0,
        "text0": "Home-LevelTwo Visit SAP Homepage 31",
        "url": "http://www.sap.com",
        "icon": "sap-icon://menu"
      }, {
        "propId": 1,
        "text0": "Home-LevelTwo Visit SAP Homepage 32",
        "url": "http://www.sap.com",
        "icon": "sap-icon://menu"
      }, {
        "propId": 2,
        "text0": "Home-LevelTwo Visit SAP Homepage 33",
        "url": "http://www.sap.com",
        "icon": "sap-icon://menu"
      }]
    }]
  }]
}

在您的初始视图中：

<TileContainer id="container" tileDelete="handleTileDelete" tiles="{/TileCollection}">
  <StandardTile icon="{homeIcon}" type="{homeType}" number="{homeNumber}" numberUnit="{homeNumberUnit}" title="{homeTitle}" info="{homeInfo}" infoState="{homeInfoState}" press="onSelectionChange" />
</TileContainer>

在其Controller中，当在初始视图中点击一个tile时，它应该绑定数据内容：

onSelectionChange: function(oEvent) {
  this.getOwnerComponent().getRouter().navTo("levelOne", {
    levelOneID: oEvent.getSource().getBindingContext().getProperty("homeId")
  });
}

对于其 View 中的第二组图块：

<TileContainer id="container1" tiles="{home0Data}">
  <StandardTile icon="{home0Icon}" type="{home0Type}" number="{home0Id}" numberUnit="{home0NumberUnit}" title="{home0Title}" info="{home0Info}" infoState="{home0InfoState}" press="onSelectionChange" />
</TileContainer>

第二个控制器:

_onRouteMatched: function(oEvent) {
    this._levelOneID = oEvent.getParameter("arguments").levelOneID;
    this.getView().bindElement("/TileCollection/" + this._levelOneID);
  },

  onSelectionChange: function(oEvent) {
    var sLevelTwoID = oEvent.getSource().getBindingContext().getProperty("home0Id");

    this.getOwnerComponent().getRouter().navTo("levelTwo", {
      levelOneID: this._levelOneID,
      levelTwoID: sLevelTwoID
    });
  }

最重要的是，您的 manifest 应该包含路由模式，这将更新 url 以便正确层次结构中的内容显示在视图中:

"routing": {
  "config": {
    "routerClass": "sap.m.routing.Router",
    "viewType": "XML",
    "viewPath": "sap.otuniyi.sample",
    "controlId": "rootControl",
    "controlAggregation": "pages",
    "transition": "slide",
    "bypassed": {
      "target": ["home", "notFound"]
    },
    "async": true
  },
  "routes": [{
    "pattern": "",
    "name": "apphome",
    "target": "home"
  }, {
    "name": "levelOne",
    "pattern": "TileCollection/:levelOneID:",<-- this changes the value in the controller before loading the data
    "target": ["home", "levelOne"]
  }, {
    "name": "levelTwo",
    "pattern": "TileCollection/:levelOneID:/home0Properties/:levelTwoID:", <-- and this
    "target": ["levelOne", "levelTwo"]
  }],
  "targets": {
    "home": {
      "viewId": "home",
      "viewName": "Homepage",
      "viewLevel": 0
    },
    "notFound": {
      "viewId": "notFound",
      "viewName": "NotFound",
      "transition": "show"
    },
    "levelOne": {
      "viewName": "LevelOne",
      "viewLevel": "1"
    },
    "levelTwo": {
      "viewName": "LevelTwo",
      "viewLevel": "2"
    }
  }
}

如何加载新的平铺视图，其中源是 json 文件中的对象数组

how to load a new tile view where the source is an array of objects from the json file

sapui5

tile