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を空白にすることはできないというエラーが表示されます。

私は、c：forEachのui：repeatを交換すると問題なく動作します。 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"); 

javascriptが正しいdivにレンダリングできるように、IDは異なる必要があります。私はid属性を明示的に定義し、それをクライアントコードのidとして渡すことを試みました。前に言ったように、それはうまくいきません。助けてくれてありがとう。

** EDIT **

これは私の問題です。明らかにコロン文字のため、私はdivタグでclientIdを使用できません。私はjavascriptでそれを変更しましたが、どのようにdivにその値を取得しますか？ idを生成する必要があるため、idでdivタグを取得できません。私は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が返されます。

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

と

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

ここで生成された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は、すべてのオカレンスが置換されることを確実にすると、二重スラッシュはちょうどあなたが通常のJava文字列で行うようように、JSの文字列にスラッシュ自体をエスケープすることで正規表現である）