XML2JSON+javascriptテンプレートエンジンでRSS表示
drk7.jpさんでXML2JSON serviceという面白いサービスが開始されました。
ということで早速ハックしてみました。
前のエントリーで書いたJavascriptテンプレートと組み合わせてめちゃくちゃ簡単にRSSを表示できます。
使い方ですが、多分ソースをみてもらったほうが速いです。
//サンプルHTMLから抜粋
- Event.observe(window, "load", function(){
- new XML2JSON("<a href="http://feeds.feedburner.com/Inforno">http://feeds.feedburner.com/Inforno</a>", {container: "test", template : {element:"template"}});
- });
初期化コードはｺﾚだけです。
containerでinnerHTMLに結果を流し込みたいElementを指定します。
templateはLyase.View.renderの引数と同じです。
例ではtextareaエレメントのid:"tempalte"のinnerHTMLをテンプレートとして扱います。
こんな感じでテンプレートがかけるので、デザインの変更が大変楽になります。 またJSONデータ取得時のonloadを好きなメソッドに置き換えることもできるのでLyase.Viewを使わなくてもXML2JSONライブラリだけで おいしくいただけます。すきに改造してやってください、たいしたものじゃないですし（笑
埋め込みjavascriptを実装してみました。
naoyaさんのJemplateの記事に触発されて埋め込みjavascriptを実装してみました。
同様の実装としてAjax Pagesがあるのですが、よりシンプルに実装してみました。コードにして50行。
これは今作っているフレームワークの一部です。シンプルですがわりと使えるかと。 実際の動作はサンプルファイルを見ていただくとして
lyase_view.jsの説明どおり
- /*
- * using innerHTML
- * -------------
- * //in HTML
- * <textarea id="template" style="display:none">
- * The value of x is:<%= context.x%>
- * </textarea>
- * //code
- * document.write(Lyase.View.render({element:"template"}, {x : 10}));
- *
- * using a template file
- * -------------
- * //in /template.jhtml
- * The value of x is:<%= context.x%>
- * //code
- * document.write(Lyase.View.render({file:"/template.jhtml"}, {x : 10}));
- *
- * Of course, you can embed more complex codes.
- * //in HTML, with prototype.js
- * <textarea id="template" style="display:none">
- * <% context.list.each(function(pair){%>
- * The value of <%= pair.name %> is: <%= pair.value%>
- * <% }) %>
- * </textarea>
- * //code
- * document.write(Lyase.View.render({element:"template"},
- * {list :[{name : "x", value : 10}, {name : "y", value : 20}]}));
- */
こんな感じでjavascriptのコードが読み込めます。
また
- この文章はLyase.Viewを使用して<%= context.fileName %>の内容を表示しています。
- 以下のようにクロージャも問題なく使用できます。
- <% var c = "," %>
- <% context.list.each(function(num){ %>
- <%= num+c %>
- <% })%>
- <%= render({file :"./sample2.jhtml"}, context)%> <!--ココに注目--!>
このようにテンプレート内で別のテンプレートを呼び出すことも可能です。
テンプレートには文字列、textareaなどのinnerHTML、テンプレートファイルが使用できます。 prototype.jsのAjax.Updaterあたりをハックすれば結構使えるものになるんじゃないかなあ、と思ってみたり。
・2006年2月16日追記 id:brazilさんもjavascriptのテンプレートについて書かれてますね。 実は僕もHTML生成関数は作成しています。DOM版とHTMLタグ生成版で。 今回のライブラリのようなアプローチとどっちがいいか、となるともう少し検討が必要かな・・・