dataList中有多个remoteCommands，但只有一个调用

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

至于问题的原因，这个构造在同一个作用域内生成了多个同名getTaste的JS变量，基本上是这样的：

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

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

你想给他们每个人一个唯一的 JS 变量名。您可以利用<p:dataList> 的varStatus 属性，通过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()" />