「Lyase.View Ajax指向のシンプルテンプレートエンジン(その1)」の続きです。
Lyase.Viewを使って、さらに次のソースコードのテンプレート化を推し進めます。
var html = '<ol>'; for (var i=0; i<AOLVS.VideoSet.totalResultsReturned; i++) { var video = Object.extend({ description: '(description)', category: '(category)', filesize: '(filesize)', runtime: '(runtime)' }, AOLVS.VideoSet.Video[i]); html += '<li>'; html += Lyase.View.render({element: 'template'}, video); html += '</li>'; } html += '</ol>'; document.getElementById('results').innerHTML = html;
↓その結果がこちらです。こんな感じ。
「ol」「li」のリストタグと、そのリストを作る「for」のループをテンプレートに加えます。また今回はprototype.jsを使ってforを「each」に置き換えています。
<textarea id="template" style="display:none;"> <ol> <% context.each(function(video) { video = Object.extend({ description: '(description)', category: '(category)', filesize: '(filesize)', runtime: '(runtime)' }, video); %> <li> <img src="<%=video.thumbnailUrl%>" /> </div><div> <a href="<%=video.videoUrl%>" target="_blank"><%=video.title%></a> </div><div> <a href="<%=video.channelUrl%>" target="_blank"><%=video.channel%></a> - <%=video.dateFound%> </div><div> <%=video.description%> ... </div><div> <%=video.category%> - <%=video.filesize%> - <%=video.runtime%> - <%=video.formats%> </div> </li> <% }); %> </ol> </textarea>
Lyase.View.renderメソッドを使ってテンプレートにパラメータを適用します。このときパラメータとしてビデオの配列を指定しています。
document.getElementById('results').innerHTML = Lyase.View.render({element: 'template'}, AOLVS.VideoSet.Video);
テンプレート中に「<% javascript code %>」(<%=でないことに注目!)を埋め込むと、その埋め込んだJavaScriptコードをそのまま評価して実行されます。またここでのテンプレート中の「context」という変数は「AOLVS.VideoSet.Video」が対応します。
今回はここまで。Lyase.Viewはまだ続けます。次は「using a template file(外部ファイルとして)」というAjax指向の方法を紹介します。