一から勉強させてください( ̄ω ̄;)

最下級エンジニアが日々の学びをアウトプットしていくだけのブログです。

jsRender使ってみた

今回はJavaScriptのテンプレートエンジンであるjsRenderを試しに使ってみたメモです。

まずこのテンプレートエンジンとは、、


テンプレートエンジンはテンプレートと呼ばれる雛形と、あるデータモデルで表現される入力データを合成し、成果ドキュメントを出力するソフトウェアまたはソフトウェアコンポーネントである。(by wikipedia

らしいです。

要するにテンプレートと呼ばれる雛形をあらかじめ用意しておいて、動的に変わるデータを楽に出力させよう!
てことですね。


早速コードを書いてみました。これ!

<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
		li{
			list-style:none;
		}
		</style>
	</head>
	<body>
		<!-- テンプレートでul,liを生成して挿入する -->
		<div id="list"></div>

		<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
		<script src="http://borismoore.github.com/jsrender/jsrender.js"></script>

          <!-- テンプレートの定義 -->
	     <script id="template" type="text/x-jsrender">
		<ul>
		{{for personal_data}}
		    <li>{{>id}}:{{>name}}</li>
	        {{/for}}
	        </ul>
		</script>

		<script type="text/javascript">
		$(function() {
		    var result = {
			    	    personal_data:[
			            { id: "01", name: "山田" },
			            { id: "02", name: "田中" },
			            { id: "03", name: "山本" }
		   		    ]
		   		};
		    $("#list").html(
		    	 //テンプレートにデータを渡して、レンダリングする
		        $("#template").render(result)
		    );
		});
		</script>
	</body>
</html>

流れを順番に見ていくと、

まず、結果を表示させたい場所をhtmlのほうで、指定します。(div id="list"の部分)
              ↓

次にテンプレートを定義します(あとで使うため、ここにはid="template"を振っておきます。)

今回、オブジェクトを取得してリスト表示させる想定なので、そのオブジェクトのプロパティ名を指定してfor文で処理します。(テンプレート上では{{for プロパティ名}}~{{/for}}って書くみたいです。)

また、ここで使う{{>id}}や{{>name}}が大事な部分!!これは{{html:id}}、{{html:name}}の省略形で、エスケープ処理をして出力することを表しているみたいです。

ちなみにエスケープしない場合は{{:id}}、{{:name}}て書きます。
また、{{:#index}}ってやると0から順番に値を取得できるので、今回用意した{{>id}}の代わりに{{:#index + 1 }}とかってやるのもアリですね。
              ↓

次に表示させたいデータを定義します。(変数resultの部分、personal_dataプロパティ)
んで先ほど指定したdiv id="list"の部分に対してhtmlを出力する命令を書きます。
              ↓

ここでjsrenderを使用するため、先ほど用意したid="template"に対してrenderメソッドでデータを代入した変数resultを渡します。
こうすることで先ほど定義しておいたテンプレートに従ってデータを出力してくれるみたいです。


ふむ。とりあえずこれでちゃんと3人のpersonal_dataがリスト形式で出力されました。

ほんとはこれだけじゃなくて四則計算とかif文とか使えるんですけど、それはまた今度。。

あ、ちなみにif文を使うときelse ifを使うとブラウザによってバグることがあるので、else if{~}ではなく、else{~}だけを使った方が安全ですよ。


小さなことからコツコツと。