JSONからDOMを生成するシンプルなjQueryプラグイン
jQuery使ってると、人によってDOM生成の仕方が結構まちまちになる。
その辺、クライアントサイドもMVC("M"がJSON、"V"がHTML、"C"がプラグイン)にすれば書き方が統一できるし、ソースも綺麗になりそう。
試しに、HTMLのclass属性を元にしてJSONデータを埋め込むのを作ってみた。
・jquery.templateSample.js
( function( $ ) { $.fn.render = function( data ) { var result = new Builder( this, data ).print(); $( this ).parent().empty().append( result ); }; var Builder = function() { this.init.apply( this, arguments ); }; Builder.prototype = { init: function( tmpl, data ) { this.buf = null; this.data = data; this.tmpl = $( tmpl ); this.build(); }, build: function() { this.buf = $( '<div>' ); for( var i = 0, len = this.data.length; i < len; i++ ) { var tmp = this.tmpl.clone(); for( v in this.data[i] ) { var d = this.data[i][v]; tmp.find( '.' + v ).text( d ); } this.buf.append( tmp ); } }, print: function() { return this.buf.children(); } }; } )( jQuery );
・JSON
{ data: [ { name: "sato", age: 20 }, { name: "suzuki", age: 30 } ] }
・HTML
<!doctype html> <html lang="ja"> <head> <meta charset=utf-8" /> <title>Template sample</title> <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/jquery.templateSample.js"></script> <script type="text/javascript"> $( function() { $.getJSON( '/path/to/json', function( json ) { $( '.person' ).render( json.data ); } ); } ); </script> </head> <body> <div class="persons"> <div class="person"> 名前:<span class="name"></span> 年齢:<span class="age"></span> </div> </div> </body> </html>
・結果(.personsのinnerHTML)
<div class="person"> 名前:<span class="name">sato</span> 年齢:<span class="age">20</span> </div> <div class="person"> 名前:<span class="name">suzuki</span> 年齢:<span class="age">30</span> </div>
スタイル用に使われるclass属性を使うとデザイナーさん主導にできるし、JSONの仕様にも悩まずに済む(class属性が仕様になる)ので結構いい感じかも。
テーブル対応してちゃんと使えるものにしてみようかな。。。