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