JsRenderの使い方メモ

テンプレート埋め込みタグ

<script id="itemTemplate" type="text/x-jsrender">
	<div class="item">
		<img class="item1" src="images/top/{{>type}}1.png" alt="{{>label}}" />
		<img class="item2" src="images/top/{{>type}}2.png" alt="{{>label}}" />
		<img class="item3" src="images/top/{{>type}}3.png" alt="{{>label}}" />
		<img class="item4" src="images/top/{{>type}}4.png" alt="{{>label}}" />
		<img class="item5" src="images/top/{{>type}}5.png" alt="{{>label}}" />
		<img class="item6" src="images/top/{{>type}}6.png" alt="{{>label}}" />
		<img class="item7" src="images/top/{{>type}}7.png" alt="{{>label}}" />
	</div>
</script>

{{>val}}は、エスケープあり {{:val}}は、エスケープ無し

条件分岐

{{if is_new !== 1}}
    <div>New!</div>
{{/if}}

繰り返し

<ul id="target"></ul>

<script id="sampleTemplate" type="text/x-jsrender">
{{for array}}
    <li>{{:#data}}</li>
{{/for}} 
</script>

<script>
var array = [123,456,789];
var outputHtml = $("#sampleTemplate").render(array);
</script>

参考URL
http://borismoore.github.com/jsrender/demos/step-by-step/03_converters-and-encoding.html