forms - dataList 中有多个 remoteCommand，但只有一个调用

Question

这个有点棘手，我不明白为什么会这样:

<p:dataList var="item" value="#{recb.friends}" type="definition">
    <p:column>
        <h:form>
            <p:remoteCommand name="getTaste" process="@this" 
                         actionListener="#{item.calculateTaste( recb.username )}"
                         autoRun="true" oncomplete="poll.start()" />    
            <p:poll autoStart="false" update="@form" interval="1"
                widgetVar="poll" oncomplete="poll.stop()" />                    
        </h:form>
    </p:column>
</p:dataList>

所以我希望发生的是:对于每个 ITEM，它将调用 calculateTaste 方法。发生的情况是:只有一次调用，只是针对 dataList 中的最后一项。

我想不出哪里出了问题。我添加了列以便生成 ID，但它仍然不起作用 :(。

Answer 1

至于问题的原因，这个构造生成了多个同名的JS变量getTaste在相同的范围内，基本上是这样的:

<script>var getTaste = function() { ... }</script>
<script>var getTaste = function() { ... }</script>
<script>var getTaste = function() { ... }</script>
...

它们基本上按照声明的顺序和调用 getTaste() 时相互覆盖在 DOM 就绪时，基本上最后一个将被实际调用。这与您正在观察的符号完全匹配(通过右键单击自己查看生成的 HTML 源代码，浏览器中的查看源代码也会告诉您这一点)。

您想给它们每个一个唯一的 JS 变量名。您可以使用 varStatus <p:dataList> 的属性使用 getIndex() 获取当前迭代状态方法。

<p:dataList ... varStatus="loop">
    ...
    <p:remoteCommand name="getTaste#{loop.index}" ... /> 

这样生成的代码以唯一的 JS 变量名结束:

<script>var getTaste0 = function() { ... }</script>
<script>var getTaste1 = function() { ... }</script>
<script>var getTaste2 = function() { ... }</script>
...

我还将在 <p:poll widgetVar> 上应用相同的解决方案顺便说一下。

<p:dataList ... varStatus="loop">
    ...
    <p:remoteCommand name="getTaste#{loop.index}" ...
        oncomplete="poll#{loop.index}.start()" /> 
    <p:poll ...
        widgetVar="poll#{loop.index}" oncomplete="poll#{loop.index}.stop()" />