Sharable

システム&ウェブのシェアラブル

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

2012年8月7日
試した日
2012-08-07

jquery
1.7.2

underscore.js
1.3.3

backbone.js
0.9.2

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

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

view + underscore.jsのtemplateサンプル

htmlの部分です。

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

http://gist.github.com/3282062.js?file=backbone.js – lv.2 view+template

今回は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を絡めたサンプルに進もうと思ってます。一歩、いや半歩ずつかな。

ちなみにtype=”text/template”のscriptがtext/javascriptのscriptより下にあると、動きませんでした。たぶん読み込みが終わってないからかな?
この記事と似たような記事があります。⇒http://soylatte.jp/2012/07/backbone-js-view/
このエントリーをはてなブックマークに追加