2011年10月18日火曜日

jQuery templatesを利用して元のHTMLにテンプレート用のタグをできるだけ入れないようにしてみた

jQuery templatesを利用して、支給されたhtmlにデータを動的に適用します。

方針

  • できる限りもとのHTMLをいじらない
  • 動的に変更されるデータ部分に適用されているサンプルデータを消さない
  • テンプレート部分は外だしする

説明

こんな感じのHTMLがデザイナさんから提供されたとします。
view plainprint?
  1. <html>  
  2.   <head>  
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  4.   </head>  
  5.   <body>  
  6.     <h1>sample</h1>  
  7.     <h2>リスト</h2>  
  8.     <ol id="result-list">  
  9.         <li><b>鈴木(30)</b>:女性</li>  
  10.         <li><b>安藤(20)</b>:男性</li>  
  11.     </ol>  
  12.       
  13.     <hr/>  
  14.       
  15.     <h2>テーブル</h2>  
  16.     <table>  
  17.         <thead>  
  18.             <tr>  
  19.                 <th>name</th>  
  20.                 <th>age</th>  
  21.                 <th>sex</th>  
  22.             </tr>  
  23.         </thead>  
  24.         <tbody id="result-table">  
  25.             <tr>  
  26.                 <td>鈴木</td>  
  27.                 <td>30</td>  
  28.                 <td>女性</td>  
  29.             </tr>  
  30.             <tr>  
  31.                 <td>安藤</td>  
  32.                 <td>20</td>  
  33.                 <td>男性</td>  
  34.             </tr>  
  35.         </tbody>  
  36.     </table>  
  37.   </body>  
  38. </html>  

動的に変更される部分の確認

サンプルでデータが入っていますが、動的に変更される箇所が2カ所あります。

view plainprint?
  1. <li><b>鈴木(30)</b>:女性</li>  
  2. <li><b>安藤(20)</b>:男性</li>  

view plainprint?
  1. <tr>  
  2.     <td>鈴木</td>  
  3.     <td>30</td>  
  4.     <td>女性</td>  
  5. </tr>  
  6. <tr>  
  7.     <td>安藤</td>  
  8.     <td>20</td>  
  9.     <td>男性</td>  
  10. </tr>  

テンプレート化

では、この部分をテンプレート化します。項目は三つで「名前」「年齢」「性別」なので、単純に「${変数名}」として置き換えます。

view plainprint?
  1. <li><b>${name}(${age})</b>:${sex}</li>  

view plainprint?
  1. <tr><td>${name}</td><td>${age}</td><td>${sex}</td></tr>  

jQuery.templatesを利用してテンプレートをコードとして格納する

$.template(name, template)というメソッドを使って$.templateというmapに先ほど作成したテンプレートを格納します。
$.templateというmapにnameがkeyでtemplateがvalueとして格納されます。mapなので、$.template["name"]でtemplateが参照できます。

先ほどのHTMLで動的に変更される部分にidがついていたので、それをそのままtemplate名としてしまいましょう。

index.template.js
view plainprint?
  1. $(function(){  
  2.     $.template(  
  3.         "result-list",   
  4.         "<li><b>${name}(${age})</b>:${sex}</li>"  
  5.     );  
  6.       
  7.     $.template(  
  8.         "result-table",   
  9.         "<tr><td>${name}</td><td>${age}</td><td>${sex}</td></tr>"  
  10.     );  
  11. });  

元のhtmlにjQuery、jQuery templates、自作のテンプレートを読み込ませる

今回はjQueryとjQuery templatesを利用するのでheadで読み込ませます。先ほど作成したindex.template.jsも読み込ませておきます

この時点では以下の通りです。

view plainprint?
  1. <html>  
  2.   <head>  
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  4.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>  
  5.     <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>      
  6.     <script type="text/javascript" src="index.template.js"></script>      
  7.   </head>  
  8.   <body>  
  9.     <h1>sample</h1>  
  10.     <h2>リスト</h2>  
  11.     <ol id="result-list">  
  12.         <li><b>鈴木(30)</b>:女性</li>  
  13.         <li><b>安藤(20)</b>:男性</li>  
  14.     </ol>  
  15.       
  16.     <hr/>  
  17.       
  18.     <h2>テーブル</h2>  
  19.     <table>  
  20.         <thead>  
  21.             <tr>  
  22.                 <th>name</th>  
  23.                 <th>age</th>  
  24.                 <th>sex</th>  
  25.             </tr>  
  26.         </thead>  
  27.         <tbody id="result-table">  
  28.             <tr>  
  29.                 <td>鈴木</td>  
  30.                 <td>30</td>  
  31.                 <td>女性</td>  
  32.             </tr>  
  33.             <tr>  
  34.                 <td>安藤</td>  
  35.                 <td>20</td>  
  36.                 <td>男性</td>  
  37.             </tr>  
  38.         </tbody>  
  39.     </table>  
  40.   </body>  
  41. </html>  

テンプレートにデータを適用する。

とりあえず、index.jsなどとして、配列に名前、年齢、性別を持ったオブジェクトを詰めておきます。実際にはajaxアクセスなどして取得したjsonとかを詰めることになると思います。
$.tmpl(template, data)でtemplateにdataが反映されるので、適用したいtargetにappendToすることで反映されます。
サンプルデータが入っているので、最初に空にしてから反映するというメソッドにしています。

index.js
view plainprint?
  1. $(function() {      
  2.     var data = [  
  3.         { name:"鈴木", age:20, sex:"男性" },  
  4.         { name:"田中", age:50, sex:"女性" },  
  5.         { name:"齋藤", age:35, sex:"週二回" },  
  6.     ];  
  7.       
  8.     var appendTemplate = function(template, target){  
  9.         $(target).empty();  
  10.         $.tmpl(template, data).appendTo(target);              
  11.     }  
  12.   
  13.     appendTemplate("result-list","#result-list");        
  14.     appendTemplate("result-table","#result-table");  
  15. });  

完成品はgitHubに上げてあります。JavaScriptを無効にすると元々のサンプルデータが入った状態になります。
投稿者 enum 時刻: 23:30
ラベル:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)