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

「Lyase.View Ajax指向のシンプルテンプレートエンジン(その2)」の続きです。

前回は「using innerHTML(ページ中の要素として)」の方法を使いましたが、今回は「using a template file(外部ファイルとして)」の方法を使って、テンプレートをファイルに分離してみます。↓その結果がこちらです。こんな感じです。

 
View Example

はじめにWEBページ中の要素として追加したテンプレートをファイルに移動します。ファイルに移動したら、次のテンプレート(textarea要素)は不要なのでWEBページ中から削除します。

<textarea id="template" style="display:none;">
  template text
</text>

テンプレートをファイルに保存してアップロードします。ここでは「lyase_view_ajax.txt」という名前のテキストファイルにしました。

lyase_view_ajax.txt

<ol>
<%
  context.each(function(video) {
    video = Object.extend({
      description: '(description)',
      category: '(category)',
      filesize: '(filesize)',
      runtime: '(runtime)'
    }, video);
%>
<li>
<div>
<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>

次にLyase.View.renderメソッドを使ってテンプレートにパラメータを適用します。このとき引数としてテンプレートのファイル名を指定します。

  document.getElementById('results').innerHTML =
    Lyase.View.render({file: 'lyase_view_ajax.txt'}, AOLVS.VideoSet.Video);

Lyase.View.renderメソッドはprototype.jsのAjax.Requestを使ってテンプレートファイルを取得します。ただし、オリジナルのソースコードではHTTPのPOSTメソッドを使ってテンプレートファイルを取得するため、WEBサーバの設定によってはエラーになることがあります。多くのWEBサーバでは静的ファイルへのPOSTメソッドを制限しているためです。

ですので、エラーが発生するときは、次のようにオリジナルのソースコードを修正して使います。Ajax.RequestのオプションにGETメソッドを使うように指定します。(ソースコードを修正せずにWEBサーバの設定を見直すという方法もありますが、ここでは割愛します。)

lyase_view.js

//template = (new Ajax.Request(options.file,{asynchronous : false})).transport.responseText;
template = (new Ajax.Request(options.file,{asynchronous : false, method: 'get'})).transport.responseText;

参考として「using text(JavaScriptの文字列として)」の方法にも触れておきます。この方法はJavaScriptコード上の文字列をテンプレートとする最も単純な方法です。例えばusing innerHTMLの例は、次のように書き換えることもできます。

  var request = new Ajax.Request('lyase_view_ajax.txt', {
    method: 'get', asynchronous : false
  }).transport;
  if (request.status!=200)
    return alert(request.status+' '+request.statusText);
  var text = request.responseText;
  
  document.getElementById('results').innerHTML =
    Lyase.View.render({text: text}, AOLVS.VideoSet.Video);

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

View Example

Lyase.Viewの使い方はここまで。ただまだ続けます。後はLyase.Viewをより深く理解するため、Lyase.Viewのソースコードを引用しながらその特徴を紹介します。きっと。。。