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

JavaScriptテンプレートエンジンの比較サイトを探していると「blog@slightlyblue javascriptテンプレートエンジンまとめ」というブログを発見しました。このブログは各テンプレートエンジンのコーディングスタイルを実例で紹介しています。ネットでよく見かけるテンプレートエンジンは網羅していると思います。

ただその中に「Lyase.View」という知らないテンプレートエンジンがあったのでさっそく使ってみました。Lyase.Viewは「inforno ? 埋め込みjavascriptを実装してみました。」というブログで配布されています。ライセンスは「Articstic License 2.0」です。ダウンロードするとアーカイブにいくつかのサンプルが入っているので、まずはサンプルを眺めて雰囲気を掴むとよいでしょう。

Lyase.Viewはテンプレートを「using text(JavaScriptの文字列として)」「using innerHTML(ページ中の要素として)」「using a template file(外部ファイルとして)」の3通りの方法で扱えます。今回はusing innerHTMLの方法を使って「AOLVS Ajax APIを使ってビデオの主要なデータを表示してみる」で作ったAjaxアプリをLayse.Viewで置き換えてみました。↓こんな感じです。

 
View Example

次のソースコードをLyase.Viewを使ってテンプレート化します。

    html += '<div>';
    html += '<img src="'+video.thumbnailUrl+'" />';
    html += '</div><div>';
    html += '<a href="'+video.videoUrl+'" target="_blank">'+video.title+'</a>';
    html += '</div><div>';
    html += '<a href="'+video.channelUrl+'" target="_blank">'+video.channel+'</a>';
    html += ' - ';
    html += video.dateFound;
    html += '</div><div>';
    html += video.description+' ...';
    html += '</div><div>';
    html += video.category;
    html += ' - ';
    html += video.filesize;
    html += ' - ';
    html += video.runtime;
    html += ' - ';
    html += video.formats;
    html += '</div>';

はじめに「prototype.js」と「lyase_view.js」を取り込みます。lyase_view.jsはprototype.jsに依存しています。

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="lyase_view.js"></script>

テンプレートをページ中の要素として追加します。次のように要素はtextareaを使うとよいでしょう。このときテンプレートの要素を特定するためにidを付与しておきます。またテンプレートを表示しないようにstyleで非表示にします。

<textarea id="template" style="display:none;">
<div>
<img src="<%=context.thumbnailUrl%>" />
</div><div>
<a href="<%=context.videoUrl%>" target="_blank"><%=context.title%></a>
</div><div>
<a href="<%=context.channelUrl%>" target="_blank"><%=context.channel%></a> - <%=context.dateFound%>
</div><div>
<%=context.description%> ...
</div><div>
<%=context.category%> - <%=context.filesize%> - <%=context.runtime%> - <%=context.formats%>
</div>
</textarea>

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

    html += Lyase.View.render({element: 'template'}, video);

見てのとおり、Lyase.Viewのテンプレートの書式は「PHP」「JSP」「ASP」などページ中にソースコードを埋め込むものによく似ています。

テンプレート中に「<%=javascript expression%>」を埋め込むと、その埋め込んだJavaScriptコードの結果が文字列として置き換わります。またLyase.View.renderメソッドの引数に指定したパラメータは、テンプレート中で「context」という変数で参照できます。

とりあえず今回はここまで。Lyase.Viewの紹介はまだ続けます。きっと。。。