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で置き換えてみました。↓こんな感じです。
次のソースコードを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の紹介はまだ続けます。きっと。。。