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属性が仕様になる)ので結構いい感じかも。
テーブル対応してちゃんと使えるものにしてみようかな。。。