控制器

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

这是一个有效的示例：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 */
}

请参见Binding in Control with "class" Attribute

Answer 2

如果它可以在onInit中工作，但不能在您的pressbutton事件处理程序中工作，那么我假定以下条件：

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

的press事件

2）您的列表中有很多项目，而您没有正确获取这些项目的ID。

在您的问题中感到困惑的是，分配给ID的控件是什么，并且更容易检查包含源代码视图的问题的根本原因。

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

控制器

CSS

2 个答案:

为什么不起作用