uuidを削除するリファクタリングコード

Question

こんにちは私は、jQueryデータ関数を使用してdivにデータを関連付けるJSPタグ内に生成されたコードをいくつか持っています。

私はUUIDを使用して、ページ上のdivにjQueryスクリプトをリンクしています。 しかし、このアプローチは醜く不便です。UUIDを必要としないようにリファクタリングする方法があるのか​​どうか疑問に思っていました。

コードは次のようになります。

for(DomainObject domainObject : domainObjects){ 
//... 
     String uuid = UUID.randomUUID().toString(); 

     out.println("<div id='" +uuid + "' class='" + divClass + "'>"); 

     // Write out the details of this domain object. 
     out.println(/*...*/); 

     // Associate data with the div 
     out.println("<script type='text/javascript'>$('#"+uuid+"').data('domainObject'," + jsonSerializer.exclude("class").serialize(domainObject) + ")</script>"); 
     out.println("</div>"); 
//... 
    } 

Answer 1

二つの方法があれば、ドメイン・オブジェクトの使用IDが、代わり

1. （例はJSTL/ELを使用しています）。

   <div id="do_${domainObject.id}"> 
   ... 
   <script>$('#do_${domainObject.id}').foo();</script> 
   

2. ループカウンタを使用してください。

   <c:forEach items="${domainObjects}" var="domainObject" varStatus="loop"> 
       <div id="do_${loop.index}"> 
       ... 
       <script>$('#do_${loop.index}').foo();</script> 
   </c:forEach> 
   

ID がアルファベット文字で開始しなければならないことに注意してください。 IDで始まるIDは不正です。 UUIDは、数字で始まるIDを返すことがあります。

Answer 2

何がそんなに醜いか分かりません。たぶんあなたはもっと短いIDがほしいのですか？

ユニークなUUIDです。これは、HTMLページ内の要素上のIDの要件をはるかに超えています。つまり、ページ内で一意です。

1桁または2桁のページ固有IDを作成するのは簡単で適切です。 JSPでrandomUUID()をrandomPageId()に置き換える必要があります。これは、d1、d2、d3などのシーケンスを返します。

Answer 3

jQuery 1.4.3を使用できる場合、domの要素にデータを関連付けるのは非常に簡単な方法です。 1.4.3のとおりjQueryがどのdata attributesための要素を検査し、自動的にあなただけのスクリプトタグを使用している表示されますので、.dataセクション（「キー」）jsfiddle

上

<div class='myClass' data-domainObject='{"Name": "I am in your data!"}'> 
    Domain Object 
</div> 

$(function(){ 
    alert($(".myClass").data("domainObject").Name); 
}); 

例を経由して、それらを利用できるようにしますこのオプションが適していると、この（私はJSPの経験がないに注意してください）のようなものに見えるかもしれない要素にデータを追加する：

for(DomainObject domainObject : domainObjects){ 
//... 

     out.println("<div class='" + divClass + "' data-domainObject='" + jsonSerializer.exclude("class").serialize(domainObject)+ "'>"); 

     // Write out the details of this domain object. 
     out.println(/*...*/); 
     out.println("</div>"); 
//... 
    }