使用jsplumb时，id名称中的冒号（:)

Question

我正在使用jsplumb和Primefaces。我有许多p：面板组件作为ui：repeat的一部分生成。然后我想使用jsplumb将这些面板连接在一起。 Primefaces生成面板ID，然后我在脚本代码中使用这些来设置jsplumb。

当我使用我创建的面板ID时，一切正常，但我使用自动创建的面板ID，没有连接器出现。

<ui:repeat value={#mybean.nodes} var="node"> <p:panel> ... </p:panel> </ui:repeat>

jsPlumb.connect({source:"j_idt20:0", target:"j_idt20:1"});

其中j_idt20：0和j_idt20：1是Primefaces生成的id，通过检查浏览器上的html页面找到。

我认为我已经将问题跟踪到生成的ID包含'：'的事实。例如'j_idt_29：0'

如何使用jsPlumb.connect({source:"element1"target:"element2"});行中jsplumb中的名称引用id？

Answer 1

尝试使用:转义\\（如果那不行，请尝试单\）

jjsPlumb.connect({source:"j_idt20\\:0", target:"j_idt20\\:1"});

或

  

通过以下方式更改JSF默认UINamingContainer分隔符   web.xml中的上下文参数。 E.g。

<context-param>
    <param-name>javax.faces.SEPARATOR_CHAR</param-name>
    <param-value>-</param-value>
</context-param>

How to use JSF generated HTML element ID in CSS selectors?

Answer 2

你必须在{1}}中签署字符串。 Primefaces具有内置JavaScript功能。你可以这样做：

:

它将被正确转义。

如果您因某些原因不想使用此功能，请使用var escapedId = PrimeFaces.escapeClientId("id1:id2"); 转义:：

\\