Lv2 view + underscore.jsのtemplate [backbone.js]

試した日

2012-08-07

jquery

1.7.2（※1）

underscore.js

1.3.3（※2）

backbone.js

0.9.2（※3）

前回はviewのinitializeとrenderのみをサクッと触りました（※4）。次はviewとtemplateを使ってみます。これも究極的にシンプルに無駄を削ぎ落としてシェイプアップされたサンプルにしておきます。

underscore.jsのtemplateは<script type=”text/template” id=”my_template”>として定義されているものとします。それをviewのrenderファンクションの中でコンパイルして利用します。

view + underscore.jsのtemplateサンプル

htmlの部分です。

スクリプトの部分は下記のような具合になります。

今回はhtmlに#my_templateを定義してあります。underscore.jsのtemplateには引数をjsonで渡すことができるので、ある程度の動的な出力が出来ます。またbackbone.jsのmodelにはtoJSONというファンクションがあって、これと組み合わせるとmodelの内容をガツっとテンプレートに一発代入できたりします。そのサンプルは今後追々。underscore.jsは技の宝庫なので、全部は知らないけど、動的にテンプレートを選択する場合にはmemoizeというファンクションが役に立つと、Qiitaの記事に書いてありました。

アセスメント

今回もjsfiddleで黒丸を埋めてみよう！という趣旨のアセスメントを作りました。実践的に覚えたい方、やがて忘れる自分のために。

次回はviewから一旦離れてmodelを使おうかなと！modelのsaveファンクションを触ってみたいです！viewにカスタムファンクションを追加しましょう。ついでにeventsファンクションも実装してみます。そのあとviewとmodelを絡めたサンプルに進もうと思ってます。一歩、いや半歩ずつかな。