Lv.3 viewにカスタムファンクションを追加したい [backbone.js]

試した日

2012-08-08

jquery

1.7.2（※1）

underscore.js

1.3.3（※2）

backbone.js

0.9.2（※3）

viewに対してカスタムファンクションを追加してみようと思う。ついでにイベントハンドラーも追加する。ボタンのクリックとかテキストが変わったとかっていうイベントをviewでフックするためには、viewに対してeventsを設定してあげるだけでOK。

events : { event selector : callback}という具合に設定する。event selectorという記述方法に2秒くらい「えーっと」ってなるかもだけど、selectorで発生したeventという意味。たとえば「events : {“click #btn” : “callback”}」だったら#btnで発生したclickイベントの時はcallback呼ぶ、みたいな意味合い。公式ドキュメントではdelegateEventsという項目で説明されてる。

viewにファンクションを追加する

以下のサンプルでは、前述のeventsとonClickというファンクションが追加されてる。ボタンをクリックするとアラートがあがるだけのサンプル。

html

script

どうだろ、viewにファンクションを追加していくという感覚が分かるだろうか。こんな感じで必要なファンクションをどんどん追加していく。

アセスメント

jsfiddleの青いバーの右にあるプラスボタンを押す⇒黒丸の部分を正しく記述する⇒jsfiddle画面上部にあるRUNを押す⇒予期した動きになればOK。

よし！次回こそmodelに話を進めるぞー。