SAPUI5：通过 setVisibility 隐藏 <List> 不起作用

Posted 2023-02-21

【中文标题】SAPUI5：通过 setVisibility 隐藏 <List> 不起作用

【英文标题】：SAPUI5: Hiding a <List> via setVisibility not working

【发布时间】：2014-06-18 03:00:36

【问题描述】：

我有一个带有 sap.m.List 的 xml 视图，其中包含一些 sap.m.InputListItems：

<List id="listJobParams">  

  <headerToolbar> ... </headerToolbar>

  <InputListItem label="Partition" id="listItemPartition" visible="false">
    <Select id="partition" selectedKey="/partition" />
  </InputListItem>

  ...
</List>

基于某些条件，我想使用setVisibility(true|false) 方法隐藏整个列表或仅隐藏某些 InputListItems。 根据条件隐藏/显示输入列表项可以正常工作，但隐藏/显示整个列表不起作用。

问题：通过this.byId("listJobParams").setVisibility(false)隐藏列表后，使用this.byId("listJobParams").setVisibility(true)无法再次显示列表； js控制台没有报错，但是列表也没有显示出来。所以我想知道为什么 InputListItem 的行为与 List 不同。

控制器代码（从onInit() 方法中调用）：

_refreshJobDetailInput : function (channelId, eventId, data) 

  // hiding/showing input list item
  this.byId("listItemPartition").setVisible(data.jobType=='singlePartitionIndexingJob');

  // hiding/showing the entire list DOES NOT WORK; once hidden, it will never appear again, even though the condition is true (and logs as true in the console)
  this.byId("listJobParams").setVisible(data.jobType=='singlePartitionIndexingJob');

该方法可用于sap.m.list 的父类（https://openui5.hana.ondemand.com/docs/api/symbols/sap.m.ListBase.html#setVisible）并记录在案

更新：

根据下面 Qualiture 的回答，我尝试了以下无效和/或重新渲染的组合，但到目前为止没有帮助。

// 2 parents up is the 'panel'      
this.byId("listJobParams").getParent().getParent().invalidate(); 
this.byId("listJobParams").getParent().getParent().rerender();

// 3 parents up is the 'page'
this.byId("listJobParams").getParent().getParent().getParent().invalidate(); 
this.byId("listJobParams").getParent().getParent().getParent().rerender();

// 4 parents up is the 'xmlview'
this.byId("listJobParams").getParent().getParent().getParent().getParent().invalidate(); 
this.byId("listJobParams").getParent().getParent().getParent().getParent().rerender();

// this return the shell
this.byId("listJobParams").getParent().getParent().getParent().getParent().getParent().getParent().getParent().invalidate();
this.byId("listJobParams").getParent().getParent().getParent().getParent().getParent().getParent().getParent().rerender();

【参考方案1】：

this.byId("listItemPartition").setVisible... 不起作用，因为具有listItemPartition ID 的对象在 DOM 中不存在。它只是一个克隆模板。列表项是从此模板复制的，但会获得自己生成的 ID。此外，列表项是通过绑定动态创建的，因此直接操作它们有点意义：列表的下一次失效可能会使用新的 ID 重建列表项。

确保不要使用不可见的列表项作为列表的模板。

切勿直接使用rerender()。使用invalidate()。 invalidate() 在内部调用 rerender()。

【讨论】：

Re 1) listJobParams (InputListItem) 与 setVisibility() 一起工作正常，它的 listJobParams (List) 不适用于 setVisible()，即使此方法存在并且记录在 API 参考中 - openui5.hana.ondemand.com/docs/api/symbols/…

【参考方案2】：

在 SCN (http://scn.sap.com/thread/3546783) 上发布了一个类似问题（sap.ui.commons.Panel 在 sap.ui.ux3.Shell 中）

也许向您的父容器触发一个无效事件就足够了？

【讨论】：

感谢您的链接，但对我不起作用。查看更新的问题。

【参考方案3】：

另一种解决方法是挂钩 onAfterRendering 事件并使用 jQuery .css("display", "none") 隐藏或显示 DOM 元素。 SAPUI5“visible : true”表示“在 DOM 中”，“visible : false”表示 DOM 元素已被删除或根本没有创建。