Lyase.View Ajax指向のシンプルテンプレートエンジン(その2)

「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;

↓その結果がこちらです。こんな感じ。

View Example

「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指向の方法を紹介します。