ui：重复使用相同的客户端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：重复一个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字符串中那样）