动态添加 Tiles 到 TileContainer

Question

我想动态地将 Tiles 添加到 TileContainer。

我得到了一个 JSONObject (jsonResponse)，看起来像这样：

现在我想将 Tiles 添加到 TileContainer。这里的函数：

var tc = this.getView().byId("container"); //TileContainer
for (var i = 0; i < jsonResponse.length; i++) {
                    alert(jsonResponse[i].Title);
                    tc.addTile(new sap.m.StandardTile( jsonResponse[i].id, {
                        icon: "sap-icon://" + jsonResponse[i].Icon,
                        number: jsonResponse[i].Number,
                        numberUnit: jsonResponse[i].NumberUnit,
                        title: jsonResponse[i].Title,
                        info: jsonResponse[i].Info,
                        press: that.onTilePress
                    }));
}

添加了tiles，但没有任何内容。它只是白色的。当我登录 jsonResponse[i].Title 时，我得到 jsonObject.

的值

Answer 1

我认为您的迭代开头不正确： for (var i = 0; i < jsonResponse.length; i++)

您应该遍历响应，此时您正在遍历单个响应的字段 jsonResponse i 的最大值等于 jsonResponse

Answer 2

您没有使用数据绑定，这是一个错误，因为这是 sapui5 的核心:)

首先将您的 json 数据加载到 JSONModel object

var model = new sap.ui.model.json.JSONModel({ data: jsonResponse });
this.getView().setModel(model);

然后将您的图块容器和图块绑定到您刚刚创建的模型

<TileContainer tiles={/data}>
    <StandardTile
        icon="{= 'sap-icon://' + ${Icon} }"
        number="{Number}"
        numberUnit="{NumberUnit}"
        title="{Title}"
        info="{Info}"
        press="onTilePress" />
</TileContainer>

关于标题的问题，您确定 'jsonResponse' 已加载到 JS object 中还是只是一个字符串？

Answer 3

这是 javascript 的示例。希望对您有所帮助。

sap.ui.controller("com.App.Home", {  
  onInit : function() {
    var oModel = new sap.ui.model.json.JSONModel({
      TileSet : [
        { "Title" : "Apple" },
        { "Title" : "Blackberry" },
     { "Title" : "Blueberry" }
      ]
    });    
    sap.ui.getCore().setModel(oModel);    
  }  
});

sap.ui.jsview("com.App.Home",{
  getControllerName: function(){
    return "com.App.Home";
  },
  createContent: function(){
    var oTileTemplate = new sap.m.StandardTile({
      icon:"sap-icon://save",
      title:"{Title}"
    });
    
    var oTileContainer = new sap.m.TileContainer().bindAggregation("tiles", "/TileSet", oTileTemplate);
    
    var oPage = new sap.m.Page({
      title: "Tile Container Dynamic Custom Tiles",
      enableScrolling: false
    }).addContent(oTileContainer);
    var app = new sap.m.App();
    app.addPage(oPage);
    return app;
  }
});

var oView = sap.ui.view({
  id: "jsview1",
  viewName: "com.App.Home",
  type: sap.ui.core.mvc.ViewType.JS
}).placeAt("content");

<html>
  <head>
    <meta name="description" content="Tile Container Dynamic Custom Tiles - JS View" />
    <title>Tile Container Dynamic Custom Tiles - JS View</title>
    <script
      src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"        
      id="sap-ui-bootstrap"
      data-sap-ui-theme="sap_bluecrystal"        
      data-sap-ui-libs="sap.m"
      data-sap-ui-xx-bindingSyntax="complex"
      data-sap-ui-resourceroots='{"com.App": "./"}'>
    </script>    

  </head>
  <body class='sapUiBody' id="content"></body>
</html>

动态添加 Tiles 到 TileContainer

Add Tiles to TileContainer dynamically

javascript

json

tiles

sapui5