UI5:单击按钮后更改列表项的样式 [英] UI5: change the style of list items after clicking on a button

问题描述

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

我使用了 addStyleClass 并且它仅在 onInit 方法中有效，而在 press` 函数中无效，样式已添加但视图未更改.

控制器

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

CSS

.myListItemClass {宽度:50%！重要；向左飘浮;}.myListItemClasso {宽度:100%！重要；}

解决方案

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

<小时>

为什么它不起作用

它只在 onInit 中起作用而不在新闻处理程序中起作用的原因是因为样式被应用于模板控件.在您看来，您可能有这样的想法:

<块引用>

<CustomListItem id="IDCustomerListItem"><!-- 模板控件--><!-- ... --></CustomListItem></列表>

1. 在onInit中，模板控件("IDCustomerListItem")应用自定义样式，然后框架克隆模板渲染前控制每个集合项.

2. 然而，在新闻处理程序中，将样式应用到模板控件不再有任何效果，因为列表项已经被克隆和呈现.它不会再次触发克隆.

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

.myApp .sapMList.myList[data-awesomestyle] .sapMLIB {/* 我的自定义样式 */}

参见使用class"在控制中绑定属性

I want to dynamically change the style of a sap.m.CustomListItem of my list when I click on a button.

I used addStyleClass and it works only in the onInit method but not in the press` function, the style has been added but the view doesn't change.

Controller

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;
}

解决方案

Here is a working example: https://embed.plnkr.co/LAv1qfsUjX0Anu7S/.

---

Why it didn't work

The reason why it worked only in onInit but not in the press handler is because the style was being applied to the template control. You probably have something like this in your view:

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

1. In onInit, the template control ("IDCustomerListItem") applies the custom style, and then the framework clones the template control for each collection item before rendering.

2. In the press handler, however, applying the style to the template control doesn't have any effects any longer since the list items have been already cloned and rendered. It won't trigger cloning again.

The sample solution I provided above applies the style to the list. When the user triggers an action (via Switch for example), the render manager adds a custom data attribute to the corresponding HTML element by which the CSS can be applied accordingly.

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

See Binding in Control with "class" Attribute

这篇关于UI5:单击按钮后更改列表项的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！