多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()准备时基本上是最后一个将被实际调用，这完全匹配您看到的（看在产生的symtoms通过右键点击源代码，查看源代码在浏览器中也会告诉你）

你想给他们每个唯一的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()" />