从 xml 到 js SAPUI5 自定义列表项目代码在控制台中没有错误

Question

我正在尝试使用自定义列表项 -> this design 实现此自定义设计只是图标内容可以是3种图标，3种颜色。

我已经在 xml 视图中完成了

<List  items="{path: '/results'}" id="exemple">
                <CustomListItem>
                <FlexBox alignItems="Start"
                    justifyContent="SpaceBetween">
                <items>

                <core:Icon size = "2rem" src="sap-icon://flag" /* I NEED 3 ICONS HERE*/  class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom" />
                <VBox  class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom" >
                <Label class="sapUiTinyMarginEnd" text="{BM}"  /> 
                <Label class="sapUiTinyMarginEnd" text="{BMS}"/>
                </VBox>
                </items>
                </FlexBox>
                </CustomListItem>
                </List>

但是因为我必须根据一些 oData 值以动态方式更改颜色和图标，所以我想在控制器中执行此操作，以便我可以使用 .onAfterRendering 函数和格式化程序，在 xml我不知道热给他指定一个格式化程序并在js控制器中操作它。我有一个 .onAfterRendering，它根据 oData 值更改我的颜色，但我必须根据该值更改甚至图标。

所以我尝试用 js 编写代码，但我的列表没有数据，控制台也没有错误。

var view = that.getView();//get view                
                var oList = sap.ui.getCore().byId(view.createId('listjs')); 
                oList.setModel(oModel);
                var CustomListItemTemplate = new sap.m.CustomListItem();
                var FlexBox = new sap.m.FlexBox({
                        alignItems : "Start",
                        justifyContent: "SpaceBetween"
                        });
                FlexBox.addItem(
                        new sap.ui.core.Icon({
                                src : "sap-icon://status-error", //HERE I SHOULD HAVE A FORMATTER BECOUSE I NEED 3 ICONS "sap-icon://status-error", "sap-icon://status-SUCCESS" AND "sap-icon://SOMETHING ELSE"
                                size: "2rem"
                        }), 
                        new sap.m.VBox({

                        }),
                        new sap.m.Label({
                            text: "{BMS}"

                        }),
                        new sap.m.Label({
                            text: "{BM}"

                        })
                );
                /*oList.onAfterRendering = function() {
                if (sap.m.List.prototype.onAfterRendering) {
                    sap.m.List.prototype.onAfterRendering.apply(this, arguments);
                }
                var items = this.getItems();
                for (var i = 0; i < items.length; i++) {
                    var item = items[i];
                    var obj = item.getBindingContext().getObject();

                    switch (oData.results[0].BMS) {
                    case 'NOTGOOD':
                    {
                        item.$().find('.sapUiIcon').addClass('RED');

                    }
                    break;
                    case 'GOOD':
                    {
                        item.$().find('.sapUiIcon').addClass('GREEN');
                    }
                    break;
                    default:
                    {
                        item.$().find('.sapUiIcon').addClass('YELLOW');
                    }
                    break;
                    }
                }
            }*/
           oList.bindAggregation("items","/results" ,CustomListItemTemplate);

Answer 1

使用格式化程序还不够吗？

<List  items="{path: '/results'}" id="exemple">
   <CustomListItem>
      <FlexBox alignItems="Start"
                    justifyContent="SpaceBetween">
         <items>
            <core:Icon size="2rem" class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom"
                       src="{path: 'BMS', formatter: '.formatIconSrc'}" 
                       color="{path: 'BMS', formatter: '.formatIconColor'}" />
            <VBox  class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom" >
               <Label class="sapUiTinyMarginEnd" text="{BM}"  /> 
               <Label class="sapUiTinyMarginEnd" text="{BMS}"/>
            </VBox>
         </items>
      </FlexBox>
   </CustomListItem>
</List>

在控制器中：

formatIconSrc:function(bms){
   switch(bms){
      case 'NOTGOOD':
         return "sap-icon://status-error";
      case 'GOOD':
         return "sap-icon://status-success";
      default:
         return "sap-icon://somethingelse";
   }
},
formatIconColor:function(bms){
   switch(bms){
      case 'NOTGOOD':
         return "red"; //css colors supported
      case 'GOOD':
         return "green";
      default:
         return "yellow";
   }
},

从 xml 到 js SAPUI5 自定义列表项目代码在控制台中没有错误

From xml to js SAPUI5 Custom List Item code NO ERROR IN THE CONSOLE

javascript

rendering

dynamic

formatter

sapui5