UI5：单击按钮后更改列表项的样式

Question

我想在单击按钮时动态更改列表 sap.m.CustomListItem 的样式。

我用了addStyleClass，它只在onInit方法中有效，在press`函数中无效，添加了样式，但视图没有改变。

控制器

pressbutton: function(oEvent) {
  var o = oEvent.getParameter("value");
  MessageToast.show(o.toString());
  var listitem = this.getView().byId("IDCustomerListItem");
  if (listitem.hasStyleClass("myListItemClass")) {
    this.getView().byId("IDCustomerListItem").removeStyleClass("myListItemClass");
    this.getView().byId("IDCustomerListItem").addStyleClass("myListItemClasso");
  } else {
    this.getView().byId("IDCustomerListItem").addStyleClass("myListItemClass"); 
  }
}

CSS

.myListItemClass {
  width: 50% !important;
  float: left;
}

.myListItemClasso {
  width: 100% !important;
}

Answer 1

如果它在 onInit 中有效但在您的 pressbutton 事件处理程序中无效，我假设如下：

1) 处理程序未分配给您的 Button

的按下事件

2) 您的列表中有很多项目，您没有正确获取项目的 ID。

在你的问题中，分配给 ID 的控件是什么令人困惑，而且如果有你的视图的源代码，会更容易检查该问题的根本原因。

Answer 2

这是一个工作示例：https://embed.plnkr.co/LAv1qfsUjX0Anu7S/。

为什么它不起作用

它仅在 onInit 而在印刷机处理程序中不起作用的原因是因为该样式已应用于 模板控件 。在您看来，您可能有这样的想法：

<List xmlns="sap.m" items="{/myCollection}">
  <CustomListItem id="IDCustomerListItem"> <!-- template control -->
    <!-- ... -->
  </CustomListItem>
</List>

在onInit中，模板控件（"IDCustomerListItem"）应用自定义样式，然后框架克隆模板控件对于渲染前的每个集合项目。
然而，在新闻处理程序中，将样式应用于模板控件不再有任何效果，因为列表项已经被克隆和呈现。它不会再次触发克隆。

我上面提供的示例解决方案将样式应用于列表。当用户触发一个动作时（例如通过 Switch），渲染管理器将自定义数据属性添加到相应的 HTML 元素，通过该元素可以相应地应用 CSS。

.myApp .sapMList.myList[data-awesomestyle] .sapMLIB {
  /* my custom style */
}

见

UI5：单击按钮后更改列表项的样式

UI5: change the style of list items after clicking on a button

css

sapui5

控制器

CSS

为什么它不起作用