Primefaces已缓存的tab能否手动重置以强制重新加载内容？

实现原理 #

PrimeFaces的dynamic="true"+cache="true"模式下，每个已加载的标签页会被标记loaded缓存标识，切换标签时只要检测到该标识就会直接读取本地缓存，不会发起服务端请求。只要手动清除指定标签的该标识，下次打开就会强制重新拉取服务端内容。

两种实现方式 #

方式1：扩展组件API实现你需要的invalidate方法 #

全局扩展TabView的客户端组件，后续所有TabView实例都可以直接调用invalidate方法：

// 扩展TabView原生组件
if (PrimeFaces.widget.TabView) {
  PrimeFaces.widget.TabView.prototype.invalidate = function(tabIndex) {
    const targetTab = this.tabs.eq(tabIndex);
    if (targetTab.length) {
      // 清除缓存标记
      targetTab.removeData('loaded');
      // 如果当前正处于该标签页，直接触发重载
      if (this.cfg.dynamic && this.activeIndex === tabIndex) {
        this.loadTab(targetTab, tabIndex);
      }
    }
  }
}

扩展完成后即可直接使用你期望的调用方式：

// 清除第0个标签的缓存，然后切换加载
PF('_MyTabViewId').invalidate(0);
PF('_MyTabViewId').select(0);

方式2：无需扩展，直接手动清除缓存 #

如果不想修改全局组件逻辑，直接执行以下代码即可达到相同效果：

// 清除第0个标签的缓存标记
PF('_MyTabViewId').tabs.eq(0).removeData('loaded');
// 切换到该标签，自动触发服务端重载
PF('_MyTabViewId').select(0);

扩展功能：清空所有标签缓存 #

如果需要批量清空所有标签的缓存，可执行以下代码：

PF('_MyTabViewId').tabs.each(function() {
  $(this).removeData('loaded');
});

内容的提问来源于stack exchange，提问作者willix