不使用 JSF/XPages 中的覆盖 ID 生成：？

Question

当像这样在 XPages 中定义一个元素时：

    <xp:div id="chartSurface"></xp:div>

生成的 HTML 如下所示：

    <div id="view:_id1:_id4:chartSurface"></div>

这是“必要的”，因为 ID 必须是唯一的，并且 JSF/XPages 元素可以重复多次。虽然我可以使用#{id:chartsurface} 获取客户端ID，但这使得寻址元素变得不必要地困难，因为“：”与CSS 伪选择器和d3js 之类的库发生冲突失败（尚未使用jQuery 对其进行测试，dojo.byId 似乎可以工作)。有没有办法告诉 JSF/XPages 使用不同的分隔符（例如 NONE 或 %），所以结果如下所示：

    <div id="view_id1_id4chartSurface"></div>
    <div id="view%_id1%_id4%chartSurface"></div>

额外问题：哪些分隔符可以保存以供使用？

Answer 1

据我所知，没有办法使用配置来更改分隔符，因为它被硬编码到 xpages 源代码中（更具体地讲到 UIComponentBase 中）。

理论上你可以尝试用渲染器替换clientId。有一个公共方法 convertClientId(FacesContext context, String clientId) 可以被覆盖，例如可以用其他字符序列替换所有 ':'。

不幸的是，我不确定 findComponent 功能是否会在此更改后正常工作。

Answer 2

正如@W_K 指出的那样，没有简单的方法。总之，有 4 种策略来处理这种情况：

1. 耸耸肩移动一个
2. 覆盖渲染器
3. 修复客户端的clientid
4. 修正您的查询

1 & 2 在旁观者的眼中。对于#3，我目前使用 2 个函数，一个 SSJS，一个 CSJS：

   function getSimpleClientID(oldID) {
   /* Server side function */
        // Removes the : from a clientID, so it can be used easily in CSS3 selectors
        return oldID.replace(/:/g,"");
   }

   function fixClientIds() {
   /* Client side function */
   // Update all ID function with simplified IDs    
      dojo.query("*[id]:not([type='hidden'])").forEach(function(node, index, arr){
         if (node.className != "xspForm") {
             node.id = getSimpleClientID(node.id);
         }
      });   
    }

在我的 SSJS 中，我不调用 getClientId("myControl")，而是调用 getSimpleClientID(getClientId("myControl"))，并在 XSP.addOnLoad() 中调用 fixClientIds()。

感谢 Luiggi 指出的链接，第 4 个选项是调整您可能使用 escapeClientID(getClientId("myControl")) 与此功能传递的查询：

   function escapeClientID(oldID) {
   /* Server side function */
        // Removes the : from a clientID, so it can be used easily in CSS3 selectors
        return oldID.replace(/:/g,"\\:");
   }

（我没有正确测试过那个）