方針
- できる限りもとのHTMLをいじらない
- 動的に変更されるデータ部分に適用されているサンプルデータを消さない
- テンプレート部分は外だしする
説明
こんな感じのHTMLがデザイナさんから提供されたとします。<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>sample</h1>
<h2>リスト</h2>
<ol id="result-list">
<li><b>鈴木(30)</b>:女性</li>
<li><b>安藤(20)</b>:男性</li>
</ol>
<hr/>
<h2>テーブル</h2>
<table>
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>sex</th>
</tr>
</thead>
<tbody id="result-table">
<tr>
<td>鈴木</td>
<td>30</td>
<td>女性</td>
</tr>
<tr>
<td>安藤</td>
<td>20</td>
<td>男性</td>
</tr>
</tbody>
</table>
</body>
</html>
動的に変更される部分の確認
サンプルでデータが入っていますが、動的に変更される箇所が2カ所あります。<li><b>鈴木(30)</b>:女性</li> <li><b>安藤(20)</b>:男性</li>
<tr>
<td>鈴木</td>
<td>30</td>
<td>女性</td>
</tr>
<tr>
<td>安藤</td>
<td>20</td>
<td>男性</td>
</tr>
テンプレート化
では、この部分をテンプレート化します。項目は三つで「名前」「年齢」「性別」なので、単純に「${変数名}」として置き換えます。<li><b>${name}(${age})</b>:${sex}</li>
<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
$(function(){
$.template(
"result-list",
"<li><b>${name}(${age})</b>:${sex}</li>"
);
$.template(
"result-table",
"<tr><td>${name}</td><td>${age}</td><td>${sex}</td></tr>"
);
});
元のhtmlにjQuery、jQuery templates、自作のテンプレートを読み込ませる
今回はjQueryとjQuery templatesを利用するのでheadで読み込ませます。先ほど作成したindex.template.jsも読み込ませておきますこの時点では以下の通りです。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="index.template.js"></script>
</head>
<body>
<h1>sample</h1>
<h2>リスト</h2>
<ol id="result-list">
<li><b>鈴木(30)</b>:女性</li>
<li><b>安藤(20)</b>:男性</li>
</ol>
<hr/>
<h2>テーブル</h2>
<table>
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>sex</th>
</tr>
</thead>
<tbody id="result-table">
<tr>
<td>鈴木</td>
<td>30</td>
<td>女性</td>
</tr>
<tr>
<td>安藤</td>
<td>20</td>
<td>男性</td>
</tr>
</tbody>
</table>
</body>
</html>
テンプレートにデータを適用する。
とりあえず、index.jsなどとして、配列に名前、年齢、性別を持ったオブジェクトを詰めておきます。実際にはajaxアクセスなどして取得したjsonとかを詰めることになると思います。$.tmpl(template, data)でtemplateにdataが反映されるので、適用したいtargetにappendToすることで反映されます。
サンプルデータが入っているので、最初に空にしてから反映するというメソッドにしています。
index.js
$(function() {
var data = [
{ name:"鈴木", age:20, sex:"男性" },
{ name:"田中", age:50, sex:"女性" },
{ name:"齋藤", age:35, sex:"週二回" },
];
var appendTemplate = function(template, target){
$(target).empty();
$.tmpl(template, data).appendTo(target);
}
appendTemplate("result-list","#result-list");
appendTemplate("result-table","#result-table");
});
完成品はgitHubに上げてあります。JavaScriptを無効にすると元々のサンプルデータが入った状態になります。
