Lv.1 viewだけ使ってみる。[backbone.js]

Lv.1 viewだけ使ってみる。[backbone.js]
試した日
2012-08-07

jquery
1.7.2(※1

underscore.js
1.3.3(※2

backbone.js
0.9.2(※3

backbone.jsの勉強のアウトプット。いろいろなチュートリアルを見ているけど、チュートリアルごとに色々なbackbone.jsの使い方があるみたい。この期に及んでチュートリアル系の記事を増やすのもなんだけど、自分自身が身につけるにはこういう記事を書くのが性に合っているようなので、、、。

今回は第一回目ということで慌てず騒がずViewだけを使ってみようと思う。しかも使うメソッドはinitializeとrenderだけにしておこうと思う。「クルトンというあの小さいパンをこよなく愛している。」という文章が表示されるだけのサンプルです。究極的に最小単位なサンプルだと思う!

viewを使ったサンプル

http://gist.github.com/3281129.js?file=backbone.js – lv.1 view

なんのひねりもないサンプルです。viewに触るだけのサンプル。ここから始めよう。うん。this.renderというように「this」をつけないと呼び出せないので、そこだけ注意です。HTMLの部分も見たい!という方はアセスメントにあるjsfiddleのhtmlタブを押せば見れます。

アセスメント

アセスメントをjsfiddleで作ってみました。忘れたときに実践的に思い出せるように。または覚えたことを実践的に確認できるように。jsfiddleのバーの右側にあるプラスボタンを押すとjsfiddleのページが開きます。そこで黒丸(●)の部分を正しく記述してから「RUN」を押してください。RESULTに予期した結果が出力されれば成功です。よく分からないけどUPDATEしちゃったら問題が崩れるから、UPDATEはしないでね。

次回はviewにunderscore.jsのtemplateも利用するサンプルになると思う。すごいカメ的な進み方だけど。ちょっとずつ覚えようと思う。

ところでjqueryとunderscore.jsとbackbone.jsを外部スクリプトとして取り込む必要があるのだけど、この取り込む順番が間違っていると10秒くらい戸惑います。ました。依存関係があるので。このあたりはRequireJsを使えば簡単に処理できるのだけど、今は直接読み込んでます。ということでjquery⇒underscore.js⇒backbone.jsという順番で読み込みました。