初めて、jqueryのプラグインを作ってみました。

ターゲットはこんな人です。
1)RESTなどの利用した外部からXMLの出力を受け取る。
2)XMLをパースして、HTMLを組み立てるのが面倒だ!
3)XSLTでやればできるのはわかるが、ほんの一部分だけXSLTを適用できればいいのに・・・・
4)クライアントサイドでできるだけ、HTMLを組み立てたい。
5)XMLの値をそのまま、HTMLのフォームの値にしたい

というところです。
一方で、パフォーマンス面はあまり考慮されていません。
つまり、HTML全体をサーバサイドでテンプレートを使って記述している場合にはあまり向かないと思います。
(指定したノード以下をすべて、パースするからです・・・・)

さて、どんな感じの事ができるかと言えば、下記のXMLがあった場合、

<data>
  <item id="32">
    <title>XMLをHTMLにマッピングしてみる</title>
  </item>
  <item id="34">
     <title>繰り返しもできる</title>
   </item>
</data>

次のようなHTMLを書きます。

<ul class="xmap-each" data-xmap-each="item" id="sample1">
    <li class="xmap" data-xmap="title"></li>
</ul>

これを、以下のようにしたいという事です。

<ul class="xmap-each" data-xmap-each="item" id="sample1">
  <li class="xmap" data-xmap="title">XMLをHTMLにマッピングしてみる</li>
   <li class="xmap" data-xmap="title">繰り返しもできる</li>
</ul>
var xml = "";  // $.get とかを使ってXMLを取得する
$('#sample1').xmap().render(xml);

というHTMLに置き換えるものです。
基本的には値を設定する場合に要素のテキストになってしまいます。
だから、タグとかでくくってあげる必要があります。
また、FORM要素の場合には、valueに値を設定します。

ただ、これでは、aタグのリンクはどうするんじゃ!?
となるので、

<div class="xmap-each" data-xmap-each="item" id="sample2">
<a href="#" class="xmap" data-xmap=".?link"><span class="xmap" data-xmap="title"></span></a>
</div>

のように記述します。
ここでミソは、?linkです。これは、linkというコールバック関数を実行します。

$('#sample2').xmap({
  callback: {
      'link': function($html_node,$xml_node){
         $html_node.attr('href','?sid=' + $xml_node.attr('id');
      }
  }
}).render(xml);

のように記述すれば、

<div class="xmap-each" data-xmap-each="item" id="sample2">
<a href="?sid=32" class="xmap" data-xmap=".?link"><span class="xmap" data-xmap="title">XMLをHTMLにマッピングしてみる</span></a>
<a href="?sid=34" class="xmap" data-xmap=".?link"><span class="xmap" data-xmap="title">繰り返しもできる</span></a>
</div>

のようになるという事です。
ちなみに、.(ドット)は現在の要素ということで、item要素でぐるぐる回しているなかの、itemをしめす.(ドット)です。

このdata-xmapの記述ルールとして

[jqueryのセレクタ]@[属性名]?[callback関数名]

あとは、もうちょっと詳しいものはデモを見てください。

デモ(ソースも含めて)のダウンロードはこちら

※ダウンロードしたzipファイルを解凍したサンプルをIEで実行するとconsoleのところでエラーになります。
_logの関数内で該当の場所を削除すれば動くはずです。
デモの方は消したのですが、zipの方は残したままでした・・・・

お仕事のご依頼・相談を承ります
この記事に関連するお仕事のご依頼やご相談をお待ちしております。 詳しくは、こちら

Leave a Reply

お仕事のご依頼・相談
この記事に関連するお仕事のご依頼やご相談をお待ちしております。 詳しくは、こちら
ソフトウェア&ライブラリ




ライブラリ
airxmail(en)
AIR版メール送受信ライブラリ
airxzip
AIR版ZIP圧縮・解凍ライブラリ
執筆書籍
本、雑誌等

WEB記事:CodeZine
執筆記事はこちら
カレンダー
2012年4月
« 3月   5月 »
 1
2345678
9101112131415
16171819202122
23242526272829
30  

カスタム検索
RSS
Add to Google < !–adsense–>
アーカイブ
カテゴリ
にほんブログ村 IT技術ブログへ