ui:使用相同的客户端ID重复. c:foreach效果很好 [英] ui:repeat using the same client id. c:foreach works fine

问题描述

我知道这可能与每个人进入的阶段有关.

I know this may have something to do with the phase each one comes in at.

如果我这样做.

 <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不能为空.

My code will not work. Debugging the javascript shows that the same id is generated for every iteration. I've tried putting loop.index to create an id and that gives me an error saying that id can't be blank.

如果我将ui:repeat交换为c:forEach，则效果很好.调试javascript会显示为每次迭代创建了一个新ID.

If I exchange the ui:repeat for a c:forEach it works fine. Debugging the javascript shows that a new id is created for each iteration.

这是我的支持代码(其中一些).

Here is my backing code(some of it).

    <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传递给客户端代码.就像我之前说过的那样是行不通的.感谢您的帮助.

The id needs to be different so the javascript can render to the correct div. I've tried explicitly defining an id attribute and then passing that as the id in the client code. Like I said before that doesn't work. Thanks for any help.

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

Here is my problem. I can't use the clientId in the div tag because of the colon character obviously. I have modified it in javascript but how would I get that value to the div. I can't get the div tag by id because I need to generate the id. I can't seem to do a document.write() either. I'm stuck at this point.

  <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');

推荐答案

我在本地环境(Tomcat 7.0.11上的Mojarra 2.0.4)上进行了快速测试.每次使用#{cc.clientId}都会为您提供唯一的ID.

I did a quick test on local environment (Mojarra 2.0.4 on Tomcat 7.0.11). Using #{cc.clientId} gives you an unique ID back everytime.

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

使用

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

这是生成的HTML源:

Here's the generated HTML source:

<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选择器中的保留字符.

This should be sufficient for your functional requirement. You might only want to escape the default separator : or to replace it by a custom separator since it's a reserved character in CSS selectors.

更新:因此，要对其进行转义，则应将:替换为\:而不是_.

Update: so you want to escape it, you should then replace : by \: and not by _.

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

(/:/g是一个正则表达式，可确保所有出现的内容都将被替换，并且双斜杠只是为了像在Java字符串中一样在JS字符串中转义斜杠本身)

(the /:/g is a regex which ensures that all occurrences will be replaced and the double slash is just to escape the slash itself in JS strings, like as you normally do in Java strings)

这篇关于ui:使用相同的客户端ID重复. c:foreach效果很好的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！