如何用sapui5添加动态id？

Question

我有一个包含几个 genericTiles 的页面。 tile 内容分别有一个图像。该图像来自 northwind 服务，我必须在我的控制器中获取数据。所以，每个图像标签都需要一个 id。我怎样才能做到这一点？或者有更好的方法吗？

App.view.xml:

<Page expandable="true" expanded="true" id="categories" title="Categories" class="sapUiStdPage" content="{invoice>/Categories}">
   <content>
        <GenericTile class="tileLayout" header="{invoice>CategoryName}"
                     subheader="{invoice>Description}" press="onPressCategoryTile"> 
            <tileContent>
                <TileContent>
                    <content>
                        <Image id="categoryImage" class="categoryImageStyle"/>
                    </content>
                </TileContent>
            </tileContent>
        </GenericTile>
    </content>
</Page>

控制器初始化：

var sUrl, oImg;
sUrl = "http://services.odata.org/V2/Northwind/Northwind.svc/Categories(1)/Picture?$format=json";
oImg = this.byId("categoryImage");

$.get( sUrl, function( data ) {
    var sTrimmedData = data.d.Picture.substr(104);
    oImg.setSrc("data:image/bmp;base64," + sTrimmedData);
});

我想为每个类别添加另一张图片。因此，图像标签需要一个包含类别索引的id。

我怎样才能做到这一点？

Answer 1

你能这样访问磁贴吗？（而不是如果使用 ID）

在onInit中，获取所有的tile this.getView().getContent().getContent()

Answer 2

您不需要获取每张图片的 ID 并分配 src。为此可以使用格式化程序。您可以 trim 格式化程序中的 base64 文本和 return 文本字符串。

XML:

<GenericTile class="tileLayout" header="{invoice>CategoryName}"
                 subheader="{invoice>Description}" press="onPressCategoryTile"> <!-- class: sapUiTinyMarginBegin sapUiTinyMarginTop -->
        <tileContent>
            <TileContent>
                <content>
                    <Image src="{
                            path: 'invoice>Picture',
                            formatter: '.formatter.formatImage'
                        }" class="categoryImageStyle"/>
                </content>
            </TileContent>
        </tileContent>
    </GenericTile>

控制器：

sap.ui.define([
  "com/sap/app/controller/BaseController",
  "com/sap/app/model/formatter"
], function (BaseController, formatter) {

BaseController.extend("com.sap.app.controller.Detail", {
    formatter: formatter,
    onInit: function () {
        ...
        ...

格式化程序：

sap.ui.define([], function () {
"use strict";
return {

    formatImage : function(data){
        var sTrimmedData = data.substr(104);
        return "data:image/bmp;base64," + sTrimmedData;
    }
}

});

如何用sapui5添加动态id？

How to add dynamic id with sapui5?

xml

sapui5

northwind