埋め込みjavascriptを実装してみました。

naoyaさん のJemplateの記事に触発されて埋め込みjavascriptを実装してみました。

同様の実装として Ajax Pages があるのですが、よりシンプルに実装してみました。コードにして50行。

サンプルファイルダウンロード

これは今作っているフレームワークの一部です。シンプルですがわりと使えるかと。 実際の動作はサンプルファイルを見ていただくとして

lyase_view.jsの説明どおり

 1/*
 2 *   using innerHTML
 3 *   -------------
 4 *   //in HTML
 5 *   <textarea id="template" style="display:none">
 6 *     The value of x is:< %= context.x%>
 7 *   </textarea>
 8 *   //code
 9 *   document.write(Lyase.View.render({element:"template"}, {x : 10}));
10 *
11 *   using a template file
12 *   -------------
13 *   //in /template.jhtml
14 *   The value of x is:< %= context.x%>
15 *   //code
16 *   document.write(Lyase.View.render({file:"/template.jhtml"}, {x : 10}));
17 *
18 *   Of course, you can embed more complex codes.
19 *   //in HTML, with prototype.js
20 *   <textarea id="template" style="display:none">
21 *     < % context.list.each(function(pair){%>
22 *          The value of < %= pair.name %> is: < %= pair.value%>
23 *     < % }) %>
24 *   </textarea>
25 *   //code
26 *   document.write(Lyase.View.render({element:"template"},
27 *     {list :[{name : "x", value : 10}, {name : "y", value : 20}]}));
28 */

こんな感じでjavascriptのコードが読み込めます。

また

 1<h1>< %= context.title %></h1>
 2 この文章はLyase.Viewを使用して< %= context.fileName %>の内容を表示しています。
 3
 4
 5以下のようにクロージャも問題なく使用できます。
 6
 7< % var c = "," %>
 8< % context.list.each(function(num){ %>
 9  < %= num+c %>
10
11< % })%>
12
13< %= render({file :"./sample2.jhtml"}, context)%> <!--ココに注目--!>

このようにテンプレート内で別のテンプレートを呼び出すことも可能です。

テンプレートには文字列、textareaなどのinnerHTML、テンプレートファイルが使用できます。 prototype.jsのAjax.Updaterあたりをハックすれば結構使えるものになるんじゃないかなあ、と思ってみたり。

comments powered by Disqus