如何在 EL（jsf、composite）中使用生成的 id？

Question

我想要一个合成器

<h:form id="f_imgA" >
        <h:graphicImage id="imgA"
            onclick="document.getElementById('#{k_imgA.clientId}').value=mods(event)"
            value="images/img?r=#{Math.random()}">
            <f:ajax event="click" listener="#{mBean.handleEvent}"
                execute="@this k_imgA" render="@this"></f:ajax>
        </h:graphicImage>
        <h:inputHidden id="k_imgA" binding="#{k_imgA}" value="#{mBean.keyX}" />
</h:form>

当我写作时

<comps:cimg imgId="imgA" />

此代码的最初目的是将修饰符状态（Ctrl、Shift、Alt）发送到服务器。

我有

<composite:interface>
    <composite:attribute name="imgId" />
</composite:interface>

<composite:implementation>
    <h:form id="f_#{cc.attrs.imgId}">
        <h:graphicImage id="#{cc.attrs.imgId}"
            onclick="document.getElementById('#{k_${cc.attrs.imgId}.clientId}').value=mods(event)"
            value="images/img?r=#{Math.random()}">
            <f:ajax event="click" execute="@this k_#{cc.attrs.imgId}"
                listener="#{mBean.handleEvent}" render="@this">
            </f:ajax>
        </h:graphicImage>
        <h:inputHidden id="k_#{cc.attrs.imgId}"
            binding="k_#{cc.attrs.imgId}" value="#{mBean.keyX}" />
    </h:form>
</composite:implementation>

这在意料之中是行不通的。有问题的表达是

#{k_${cc.attrs.imgId}.clientId}

它旨在返回 hiddenInput 的 clientId id 为 k_imgA 。据我所知，EL 无法处理上述嵌套表达式，但值得一试。那么有没有简单直接的方法来获取k_imgA的clientId呢？如果可以避免的话，我不想使用更多的 javascript。

编辑： 不要对#{Math.random()} 感到困惑，因为我有一个名为“Math”的bean。

javascript函数mods由

给出

<h:outputScript target="body">function mods(event) {return  ((event.ctrlKey)?1:0)+((event.shiftKey)?2:0)+((event.altKey)?4:0)} </h:outputScript>

Answer 1

你不需要摆弄那些_#{cc.attrs.imgId}。只需给组合一个固定的id。他们已经在自己命名容器了。然后 JSF 会担心剩下的事情。

<composite:implementation>
    <h:form id="f">
        <h:graphicImage id="i" ... />
        <h:inputHidden id="k" ... />
    </h:form>
</composite:implementation>

用法：

<comps:cimg id="imgA" />

生成的 HTML：

<form id="imgA:f" ...>
    <img id="imgA:f:i" ... />
    <input id="imgA:f:k" ... />
</form>

对于 JS 的尝试，你最好使用元素自己的 ID 作为基础：

<h:graphicImage onclick="document.getElementById(id.substring(0,id.lastIndexOf(':')+1)+'k').value='...'" />

或者，更简单，如果隐藏元素保证是生成的 HTML DOM 树中图像元素的直接兄弟，那么只需通过Node#nextSibling 抓取它：

<h:graphicImage onclick="nextSibling.value='...'" />
<h:inputHidden ... />

binding 永远不会像在您尝试的构造中那样工作，即便如此，您最好通过请求范围内的 Map 或所谓的支持组件来实现。

另见：

• Accessing JSF nested composite component elements in JavaScript
• Integrate JavaScript in JSF composite component, the clean way
• Rerendering composite component by ajax