ui:repeat 使用相同的客户端 ID。 c:foreach 工作正常

Question

我知道这可能与每个人所处的阶段有关。

如果我这样做。

 <ui:repeat id="repeatChart" varStatus="loop" value="#{viewLines.jflotChartList}" var="jflotChart">
                <p:panel>
                    <jflot:chart height="300" width="925" dataModel="#{jflotChart.dataSet}" dataModel2="#{jflotChart.dataSet2}" 
                                 xmin="#{jflotChart.startDateString}" 
                                 xmax="#{jflotChart.endDateString}"
                                 shadeAreaStart ="#{jflotChart.shadeAreaStart}"
                                 shadeAreaEnd ="#{jflotChart.shadeAreaEnd}"
                                 lineMark="#{jflotChart.wrapSpec.benchmark}" yMin="#{jflotChart.yMin}" yMax="#{jflotChart.yMax}"  />
                </p:panel>
                <br />
            </ui:repeat>     

我的代码不起作用。调试 javascript 表明每次迭代都会生成相同的 id。我试过把 loop.index 来创建一个 id，这给了我一个错误，说 id 不能为空。

如果我将 ui:repeat 换成 c:forEach 就可以了。调试 javascript 显示每次迭代都会创建一个新 id。

这是我的支持代码（其中一些）。

    <div id="#{cc.id}_flot_placeholder" style="width:#{cc.attrs.width}px;height:#{cc.attrs.height}px;">

        <script type="text/javascript">                 
       //<![CDATA[           
       $(function () {    

var placeholder = $("##{cc.id}_flot_placeholder");
var overviewPlaceholder = $("##{cc.id}_flot_overview");

id 需要不同，以便 javascript 可以呈现到正确的 div。我尝试明确定义一个 id 属性，然后将其作为 id 传递给客户端代码。就像我之前说的那样，这不起作用。感谢您的帮助。

**编辑**

这是我的问题。由于冒号字符，我不能在 div 标签中使用 clientId。我已经在 javascript 中对其进行了修改，但我将如何将该值传递给 div。我无法通过 id 获取 div 标签，因为我需要生成 id。我似乎也不能做一个 document.write() 。我被困在这一点上。

  <composite:implementation>                

       <div id="#{cc.clientId}_flot_placeholder" style="width:400px;height:400px;">


        <script type="text/javascript">                 
       //<![CDATA[           
       $(function () {  

var clientIdOld = '#{cc.clientId}';  
var clientId = clientIdOld.replace(':', '_');
var placeholder = $('#'+clientId+'_flot_placeholder');
var overviewPlaceholder = $('#'+clientId+'_flot_overview');

Answer 1

我对本地环境进行了快速测试（Tomcat 7.0.11 上的 Mojarra 2.0.4）。使用#{cc.clientId} 每次都会给你一个唯一的ID。

<ui:repeat value="#{bean.items}" var="item">
    <cc:test />
</ui:repeat>

与

<cc:implementation>
    <div id="#{cc.clientId}_foo">foo</div>
</cc:implementation>

这是生成的 HTML 源代码：

<div id="j_idt6:0:j_idt7_foo">foo</div>
<div id="j_idt6:1:j_idt7_foo">foo</div>
<div id="j_idt6:2:j_idt7_foo">foo</div>

这应该足以满足您的功能要求。您可能只想转义默认分隔符 : 或将其替换为自定义分隔符，因为它是 CSS 选择器中的保留字符。

---

更新：所以你想逃避它，你应该把:替换为\:而不是_。

var clientId = clientIdOld.replace(/:/g, '\\:');

（/:/g 是一个正则表达式，它确保所有匹配项都将被替换，双斜杠只是为了在 JS 字符串中转义斜杠本身，就像您通常在 Java 字符串中所做的那样）