java - 每次加载 facelets 组件时调用 javascript 函数

Question

我已经创建了一个自定义的 facelets 组件，我需要在每次加载时根据它从 bean 获得的值为组件设置一些值。我在组件中使用了 window.onload 函数，当页面中只有一个组件时它可以正常工作。但是当我在我的页面中使用一个或多个这个组件时，只有第一个组件获得它的值集。我需要一个很好的方法来解决这个问题。

我的xhtml是这样的

<ui:composition>

    <f:subview id="#{id}">
        <div id="script" style="display: none;">
            <script type="text/javascript">
    //<![CDATA[ 

        window.onload = function() {

           //this function manipulates the value from the bean 

            };           


        function processNepCal(){
                     //this function is for processing the changed values
        }
        // ]]>
    </script>
        </div>
        <rich:calendar datePattern="yyyy-MM-d" id="gregCal"
            rendered="#{backingBean.dataSetParam.userSession.nepDate }"
            value="#{value}" inputClass="#{empty styleClass ? '' : styleClass}" />
        <h:panelGroup
            rendered="#{!backingBean.dataSetParam.userSession.nepDate}">

            <h:panelGrid columns="3">
                <rich:comboBox id="nepCalYear" styleClass="datecls"
                    defaultLabel="year" onchange="processNepCal()" width="53px"
                    readonly="true" directInputSuggestions="true">
                    <f:selectItem itemLabel="2067" itemValue="2067" />
                    <f:selectItem itemLabel="2068" itemValue="2068" />
                    <f:selectItem itemLabel="2069" itemValue="2069" />
                    <f:selectItem itemLabel="2070" itemValue="2070" />
                </rich:comboBox>
                <rich:comboBox id="nepCalMonth" styleClass="datecls"
                    onchange="processNepCal()" width="65px" readonly="true"
                    defaultLabel="month" directInputSuggestions="true">
                    <f:selectItem itemLabel="Baisakh" itemValue="Baisakh" />
                    <f:selectItem itemLabel="Jestha" itemValue="Jestha" />
                    <f:selectItem itemLabel="Ashad" itemValue="Ashad" />
                    <f:selectItem itemLabel="Shrawan" itemValue="Shrawan" />
                    <f:selectItem itemLabel="Bhadra" itemValue="Bhadra" />
                    <f:selectItem itemLabel="Ahswin" itemValue="Ahswin" />
                    <f:selectItem itemLabel="Kartik" itemValue="Kartik" />
                    <f:selectItem itemLabel="Mangsir" itemValue="Mangsir" />
                    <f:selectItem itemLabel="Paush" itemValue="Paush" />
                    <f:selectItem itemLabel="Magh" itemValue="Magh" />
                    <f:selectItem itemLabel="Falgun" itemValue="Falgun" />
                    <f:selectItem itemLabel="Chaitra" itemValue="Chaitra" />
                </rich:comboBox>

                <rich:comboBox id="nepCalDay" styleClass="datecls"
                    onchange="processNepCal()" width="43px" readonly="true"
                    defaultLabel="day" directInputSuggestions="true">
                    <f:selectItem itemLabel="01" itemValue="01" />
                    <f:selectItem itemLabel="02" itemValue="02" />
                    <f:selectItem itemLabel="03" itemValue="03" />
                    <f:selectItem itemLabel="04" itemValue="04" />
                    <f:selectItem itemLabel="05" itemValue="05" />
                    <f:selectItem itemLabel="06" itemValue="06" />
                    <f:selectItem itemLabel="07" itemValue="07" />
                    <f:selectItem itemLabel="08" itemValue="08" />
                    <f:selectItem itemLabel="09" itemValue="09" />
                    <f:selectItem itemLabel="10" itemValue="10" />
                    <f:selectItem itemLabel="11" itemValue="11" />
                    <f:selectItem itemLabel="12" itemValue="12" />
                    <f:selectItem itemLabel="13" itemValue="13" />
                    <f:selectItem itemLabel="14" itemValue="14" />
                    <f:selectItem itemLabel="15" itemValue="15" />
                    <f:selectItem itemLabel="16" itemValue="16" />
                    <f:selectItem itemLabel="17" itemValue="17" />
                    <f:selectItem itemLabel="18" itemValue="18" />
                    <f:selectItem itemLabel="19" itemValue="19" />
                    <f:selectItem itemLabel="20" itemValue="20" />
                    <f:selectItem itemLabel="21" itemValue="21" />
                    <f:selectItem itemLabel="22" itemValue="22" />
                    <f:selectItem itemLabel="23" itemValue="23" />
                    <f:selectItem itemLabel="24" itemValue="24" />
                    <f:selectItem itemLabel="25" itemValue="25" />
                    <f:selectItem itemLabel="26" itemValue="26" />
                    <f:selectItem itemLabel="27" itemValue="27" />
                    <f:selectItem itemLabel="28" itemValue="28" />
                    <f:selectItem itemLabel="29" itemValue="29" />
                    <f:selectItem itemLabel="30" itemValue="30" />
                    <f:selectItem itemLabel="31" itemValue="31" />
                    <f:selectItem itemLabel="32" itemValue="32" />

                </rich:comboBox>
            </h:panelGrid>

            <h:inputText id="nepCalVal" value="#{value}"
                styleClass="#{empty styleClass ? '': styleClass}"
                style="display:none;">
                <f:converter converterId="NepaliDateConverter"></f:converter>
            </h:inputText>
        </h:panelGroup>
    </f:subview>
</ui:composition>

Answer 1

首先，为什么不为此使用组件的 value 属性？

<x:someComponent value="#{bean.value}" />

如有必要，直接在 bean 中或借助完全有值(value)的 Converter 进行操作。

---

至于您的具体问题，每次您声明一个 window.onload = function() {} 之前声明的一个将被覆盖。窗口可以只有一个 onload 函数。您基本上需要将它们全部放在相同 onload 函数中。

更好的是使用element.addEventListener反而。这是一个跨浏览器兼容的片段:

function addEvent(element, event, func) {
    if (element.addEventListener) {
        element.addEventListener(event, func, false); // Real browsers.
        return true;
    } else if (element.attachEvent) {
        return element.attachEvent("on" + event, func); // MSIE<=8.
    } else {
        return false; // Really ancient browsers.
    }
}

这样你就可以使用

addEvent(window, "load", function() {
    // Do here your thing.
});