动态添加Tile到TileContainer

时间:2017-08-25 08:35:38

标签: javascript json sapui5 tiles

我想动态地将.png添加到.png

我有Tiles jsonResponse ),看起来像这样:

enter image description here

现在我想将TileContainer添加到JSONObject。这里的功能是:

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的值。

3 个答案:

答案 0 :(得分:2)

你不使用数据绑定,这是一个错误,因为这是sapui5中的核心:)

首先将json数据加载到JSONModel对象

sudo /etc/init.d/apache2 stop

sudo /opt/lampp/lampp start

然后将瓷砖容器和瓷砖绑定到刚刚创建的模型

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

了解标题所带来的问题,您确定'jsonResponse'已加载到JS对象中,还是只是一个字符串?

答案 1 :(得分:0)

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

在迭代单个响应的字段时,您应该遍历响应jsonResponse i的最大值等于{{1}中的字段数}

答案 2 :(得分:0)

以下是使用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>