JsRender使ってみた - ゆうなんとかさんの雑記帳的な。

いまいちかゆいところに手が届かない感じだけど、たぶん私の使い方が悪いだけだ

今回はJavaScriptのテンプレートエンジン、JsRenderを使ってみました。
最近だとAngular.jsとかknockout.jsとかがありますが、あれはなんか大業な感じがしたのでもう少し簡単なテンプレートがないかなーと思って調べてたら見つけたものです。
jQueryと組み合わせて使うもので、簡単なデータを持ってきてテンプレートにはめ込むのであれば

$("#input").html($("#template").render(data));

でOKなお手軽さです。リストに次々追加していくときなんかは少々めんどくさいのですが、そうでなければかなりお手軽ですね。

おそらくよくあるつかいかたは、

<script id="itemTemplate" type="text/x-jsrender">
  <b>{{:name}}</b>の値段は<b>{{:price}}円</b>です。<br/>
  重さは<b>{{:weight}}グラム</b>です。<br/>
</script>

といった感じのテンプレートを用意して、

{
  name: "1円玉",
  price: 1,
  weight: 1
}

といったかんじのJSONをどこかから調達して、

$("#input").html($("#template").render(data));

とする物だと思います。$.jsonのコールバックなんかでやるのがパターンかなと。
スクリプト内でHTML組み立てなくていいのがいいところですね。ただでさえネストして複雑になりがちなのに、そこにカオスな文字列連結とかいやになりますからね…

参考

JavaScriptテンプレートエンジンJsRender 基本のキ（1/3）：CodeZine
1年ほど前の記事ですが、ここ見ておけばだいたいわかります。