JsRenderを使わないテキストの生成
もっとも、JsRenderなどのテンプレートエンジンを使わなくても、JavaScriptだけでテキストやHTMLを生成することはできます。
まずは、データモデルとなるJavaScriptのオブジェクトを定義し、JsRenderを使わずにテキストを生成する方法を見てみます。
<script type="text/javascript">
// データモデルの定義
var item = {
name: "みかん",
price: 100,
weight: 60
};
// +演算子を使ってテキストを連結
var result = item.name + "の値段は" + item.price + "円です。\r\n" +
"重さは" + item.weight + "グラムです。";
// 連結したテキストをメッセージボックスに表示
alert(result);
</script>
データモデルとしてJavaScriptのオブジェクトitemを定義し、+演算子を使ってその値を連結しました。
JsRenderを使ったテキストの生成
同じことを、JsRenderを使って実装してみます。
<!-- 1. JsRenderの読み込み -->
<script src="jsrender.js" type="text/javascript"></script>
<script type="text/javascript">
// データモデルの定義
var item = {
name: "みかん",
price: 100,
weight: 60
};
// 2. テンプレートの定義
var templateText = "{{:name}}の値段は{{:price}}円です。\r\n" +
"重さは{{:weight}}グラムです。";
// 3. テンプレートオブジェクトを作成
var template = jsviews.templates(templateText);
// 4. テンプレートとデータモデルを組み合わせてテキストを生成
var result = template.render(item);
// 生成したテキストをメッセージボックスに表示
alert(result);
</script>
JsRenderを読み込み、定義したテンプレートとデータモデルであるitemオブジェクトを組み合わせテキストを生成します。
- jsrender.jsを読み込みます。
- 次に、テンプレートを定義します。テンプレートは二重ブレース{{}}で囲まれたJsRenderのタグを持つテキストで、出力するテキストの雛形になります。二重ブレースの中に、:プロパティ名と書くと、JsRenderはデータモデルの中から同名のプロパティを探し出し、その値と置き換えたテキストを出力します。
- jsviews.templatesメソッドを呼び出し、テンプレートオブジェクトを作成します。
- そして、テンプレートオブジェクトのrenderメソッドを呼び出してテキストを生成します。
このように、JsRenderを使うと+演算子を使ってテキストを連結する必要がなくなります。今回の例のように、単純なテキストを生成する場合はテンプレートを定義してもメリットがないように見えます。しかし、例えばデータモデルに新しいプロパティを追加する場合、データモデルとテンプレートを修正するだけでよく、他のスクリプトを変更する必要はありません。
テンプレートをscript要素に定義する
テンプレートは別のscriptタグ内に定義することも可能です。テンプレートをscriptタグ内に定義すると、改行やダブルクォーテーションなどの文字をエスケープする必要がなくなります。
script要素内にテンプレートを定義する
script要素内にテンプレートを定義するには、テンプレートの内容をscript要素の中に記述します。
<script id="itemTemplate" type="text/x-jsrender">
{{:name}}の値段は{{:price}}円です。
重さは{{:weight}}グラムです。
</script>
テンプレートを含むscriptタグにはid属性をつけ、type属性はtext/x-jsrenderを指定してください。type属性をtext/javascriptにすると、ブラウザはテンプレートの内容をJavaScriptとして実行しようとします。しかし、テンプレートは有効なJavaScriptではないため、スクリプトエラーが発生してしまいます。
script要素内に定義したテンプレートを使う
scriptタグ内に定義したテンプレートを使うには、getElementByIdメソッドを使ってテンプレートを定義したscript要素を取得し、innerHTMLプロパティを使って内部のテキストを取得します。
// テンプレートが定義されたscript要素を探す
var templateElement = document.getElementById("itemTemplate");
// script要素内のテキストを取得
var templateText = templateElement.innerHTML;
// テンプレートオブジェクトを作成
var template = jsviews.templates(templateText);
// テンプレートとデータモデルを組み合わせてテキストを生成
var result = template.render(item);
