使用 jsf-2 将 javascript 代码封装在一个复合体中

Question

我问了这个 Is it possible to add a javascript function to a h:form in jsf2? but it was closed as a duplicate, with a link to this 答案。

也许在我的问题中我没有说清楚我想做什么：我想要一个复合材料，其内部结构可能会在未来的版本中发生变化。我希望这个组合有一个 javascript 函数，可以从外部调用它来处理所有内部细节，封装在组合中，没有任何代码部分在外面。

<h:form onload="this.myfunc=function(){alert('Hello world');}" ...

可以解决问题，但是 h:form 没有 "onload"。

这样，当组合的结构改变时，使用组合的页面不需要改变。

假设的答案有两部分。标记为“2.)”的部分根本没有解决我的问题，因为它需要 javascript 在复合材料之外。

标记为“1.)”的部分看起来更好，但我无法让它工作。

我将以下内容放入复合材料的 h:form 中：

<h:outputScript>alert("Now"+this+'#{cc.attrs.imgId}');window.document.getElementById('#[cc.attrs.imgId}').myfunc=function() {alert("newly called"+#{mBean.keyX})}</h:outputScript>

但这失败了。首先，“this”是window，不是我的"form"。其次，getElementById没有找到元素，显然是因为id被jsf改变了。

那么我该怎么做才能让它发挥作用呢？

编辑：感谢提示和答案，以下代码有效：

<composite:implementation>
    <h:form id="${cc.attrs.imgId}" styleClass="small">
        <f:event type="postAddToView" listener="#{mBean.register}" />
        <f:attribute name="myId" value="hmta${cc.attrs.imgId}" />
        <h:graphicImage width="${cc.attrs.width}" id="${cc.attrs.imgId}"
            onclick="this.nextSibling.value=mods(event)" onmouseover="aa=this.id"
            value="images/img?#{cc.attrs.flav}=#{Math.random()}">
            <f:ajax event="click" execute="@this k"
                listener="#{mBean.handleEvent}" render="@this">
            </f:ajax>
        </h:graphicImage>
        <h:inputHidden id="k" value="#{mBean.keyX}" />
    </h:form>
    <h:outputScript>window.document.getElementById('#{cc.clientId}:#{cc.attrs.imgId}').myfunc=function() {alert("newly called"+#{mBean.keyX})};</h:outputScript>
</composite:implementation>

Answer 1

第一个

通过提供 ID 调用复合组件:

<core:yourComposite id="someId" .../>

第二个

您在 h:form 属性中添加 prependId=false 以防止自动 ID 并为该表单提供 id

现在您检查呈现的 html 您将看到具有映射语义 ID 的表单，例如：someId:formId 现在您可以在调用的表单中注入您的脚本：

getElementById('#{cc.attrs.id}:formId')很正常

使用 jsf-2 将 javascript 代码封装在一个复合体中

Encapsulating javascript code inside a composite with jsf-2

javascript

encapsulation

jsf-2