jquery.xrender.jsなるものを作りました!
jquery.xrender.js
XMLレンダリングライブラリ
https://github.com/kazkicks/jquery-xrender
なるものを作りました。
ライブラリを作る目的のひとつは、作業効率のアップです。
通常、非同期でサーバからAPIを呼び出した際の処理は、以下のようになるかと思います。
script例
$.ajax({ type: "GET", url: "rss20.xml", success: function(data) { onLoadData(data); }, error: function(){}, dataType: 'xml' }); function onloadData(data) { $('#title').text($('channel title', data).val()); $('channel item', data).each(function(i) { var newItem = null; if (i == 0) { newItem = $('.item'); }else{ newItem = $('.item').clone(); $('.item:last').after(newItem); } $('.item_title', newItem).text($('title', this).val()); $('.item_description', newItem).text($('title', this).val()); }); }
HTML例
<div> <div id="title"></div> <div class="item"> <div class="item_title"></div> <div class="item_description"></div> </div> </div>
jquery.xrender.jsを利用すると以下の記述だけで、同じことができるようになります。
script無し
HTML例
<div data-xrender-xml="rss20.xml"> <div id="title" data-xrender-xpath="channel/title"></div> <div class="item" data-xrender-xpath="//item" data-xrender-filter="repeat"> <div class="item_title" data-xrender-xpath="title"></div> <div class="item_description" data-xrender-xpath="description"></div> </div> </div>
※呼び出し先のXMLとxpathを定義するだけで自動的にレンダリングされます。
すっきり!!
もし、ご興味いただけましたら、ソースを公開していますので是非リンク先をご確認ください。
https://github.com/kazkicks/jquery-xrender
MIT License