javascript: template engine

javascriptでHTMLを生成したい時は変数に入れて、DOMに挿入する：

//変数に代入
var xx = "<div id='xxx'>hoge hoge</div><h1>hoge boke</h1>";

//jqueryのHMTLメッソードで挿入
$("#mydiv").html(xx);

しかしHTMLが長ければ長いほど、管理しにくくなりますので、テンプレートエンジンを利用するとよい！

一番メジャーなテンプレートエンジンは:

今日はjqueryのプラグインとして自分で簡単なテンプレートエンジンを作ってみましょう！

参照サイト:http://blog.mach3.jp/2010/09/10/jquery-render-js.html

先ずはテンプレートを扱うメッソードを作ります jqueryのプラグインなので、extendsメッソードを利用

//jqueryプラグイン
$.fn.extend({

    //プラグイン名
    render:function( data ){
    
        //htmlメッソードでテンプレートの内容を取得
        var tmpl = this.html();
        
        //最終的にreturnされる値s
        var result = ""; 
        
        //引数を入れ替えるメッソード
        var create = function(t,d){
          var m = t.match(/\{\{(.+?)\}\}/g) || [], r = t;
          $.each( m, function(i,k){
              var v = d[ k.replace(/\{|\}/g, "") ];
              r = r.replace( k, ( v === undefined ) ? "" : v );
          });
          return r;
        };
        
        //引数がない場合
        if( data === undefined ){ return $( tmpl.replace(/\{\{(.+?)\}\}/g, "") ); }
        
        //引数は配列じゃない
        if( !(data instanceof Array) ){ return $( create(tmpl, data) ); }
        
        //引数は文字列
        $.each( data, function(i,o){ result += create(tmpl,o); } );
        
        return $(result);
    }
});

テンプレート自体を作ります。変数は**{{}}**で囲みます。

<script type="text/html" id="template">
 <ul>
     <li> My name : {{name}} </li>
     <li> My age : {{age}} </li>
 </ul>
</script>

typeの宣言はtext/htmlですよ！

メッソードを呼び出す:

//単一オブジェクト
var data = { name:"johann", age:"28"};
$("#template").render(data).appendTo($("#Container"));

HTML

<div> id="Container"></div>

以上！

canujohann/jsrender.md