javascript - 复合组件 jsf * primefaces

Question

我在使用 widgetVar 时遇到问题，而它的名称是动态生成的。我们如何正确调用这样的小部件？组件代码:

<cc:attribute name="id" required="true" type="java.lang.String" />
...
<cc:implementation>
    <p:selectOneRadio widgetVar="widgetVariable#{cc.attrs.id}" id="#{cc.attrs.id}" required="false" immediate="#{cc.attrs.immediate}"
                      value="#{cc.attrs.value}">
        <p:ajax event="click" oncomplete="checkRadio()"/>
        <cc:insertChildren/>
    </p:selectOneRadio>

    <script type="text/javascript">
        /*  <![CDATA[ */

        function checkRadio() {
            var widgetVariable = widgetVariable#{cc.attrs.id}; //HERE PROBLEM
            widgetVariable.dosmth();
        }

        /*    ]]> */
    </script>
</cc:implementation>  

这就是它有效的原因，但是当我在页面上使用此组件的许多实例时，widgetwar 有时会变得疯狂并为组件的许多实例制作 javascript。

编辑:一切正常。 无论如何，我有一个新问题。我在这个 .js 文件中创建了一些全局状态变量。

var state = -1;

function checkRadio() {
        var widgetVariable = widgetVariable#{cc.attrs.id}; //HERE PROBLEM
        widgetVariable.dosmth(state);
}

但是每个状态应该只针对一个复合实例，atm 每个复合实例都使用这个 var，有什么想法吗？

Answer 1

实际上有2个问题。

第一个问题是您在 XHTML 文件而不是真正的 JS 文件中声明 JS 函数。如果您有多个这些组件，那么您基本上是在生成多个 JS 函数 checkRadio()到 HTML 输出。在浏览器中拉取页面，右键单击并查看源代码。你基本上会看到

<script type="text/javascript">
    function checkRadio() {
        // ...
    }
</script>
<script type="text/javascript">
    function checkRadio() {
        // ...
    }
</script>
<script type="text/javascript">
    function checkRadio() {
        // ...
    }
</script>
...

在最后一个之前，它们相互覆盖。所以当checkRadio()被调用，实际上将调用最后一个。这显然是不对的。

你应该只有一个功能。您可以通过简单地将其作为函数参数来外部化变量。更重要的是，您不应该在 XHTML 文件中编写 JS 代码，而应该在您通过 <h:outputScript> 包含的独立 JS 文件中编写。 .额外的好处是，即使您有多个复合组件，它也会自动确保只加载一个 JS 文件。

<cc:implementation>
    <h:outputScript name="myComposite.js" />
    ...
    <p:ajax event="click" oncomplete="checkRadio('#{cc.attrs.id}')" />
</cc:implementation>

回到你的具体问题，你的第二个问题，你可以使用window[variableName]通过动态组合的变量名称获取全局(窗口)变量的符号。所以，checkRadio()在你的 myComposite.js 中发挥作用(随便命名，但与 myComposite.xhtml 相同的文件名将是最 self 记录的)应该如下所示:

function checkRadio(compositeId) {
   var widgetVariableName = "widgetVariable" + compositeId;
   var widgetVariable = window[widgetVariableName];
   widgetVariable.dosmth();
}