Model
document
model.validate(attrs)はモデルの属性を引数にとる。
model.validate(attrs)は不適切な場合はエラー文を返す。
invalidイベントにエラーが渡される。
model.validationErrorにエラーが格納される。
model.save()はデフォルトでvalidate()が実行される。
model.set()とmodel.unset()では{validate:true}が渡されたときvalidate()が実行される。
urlにアクセス先を指定する
View
document
tagNameで指定したElementをrootにした要素を表す。
elプロパティがその生成された要素を格納する。
$elは$(el)と同じ
classNameやidを指定することができる。
eventsでViewに関するイベントを登録する。
eventsは以下の形式
handlerはViewのプロパティ
{
‘event_type selector’: ‘handler’
}
elに既にページに存在しているCSSセレクタや$elemを指定してそれをroot要素にすることができる。
view.setElement(elem)でviewに紐づいているelemを切り替えることができる。
fooView = new FooView({el: elem, model: fooModel});
initializeでモデルとrender()をbind
redner()はDomの処理を書く
Collection
document
CollectionはModelの集合
modelにModelを指定する
urlにアクセス先を指定する
CollectionにObjectも格納することができる
Collection.get(id)はmodel.idを指定する。
modelのid属性は特別な意味を持つ。
collection.add([a,b])はa,bを加える
collection.remove([a,b])はa,bを削除する
add,removeイベントハンドラを付与することができる
所属しているモデルに対してイベントハンドラを付与することができる
{‘merge’: true}
set(data)はidに応じてadd, remove, changeイベントを起こす
set(data)はidが存在しているものは更新、ないものは削除、新規は追加
reset(data)はdataに置き換える
resetイベントが発生する
underscorejsのメソッドを利用することができる
remove()はcollectionのみ指定したmodelを削除する
Event
デフォルトのイベント一覧 *
Backbone.Eventsを継承したものがイベントを受け取ることができる。
trigger(‘event’)
once(‘event’)
change:foo_attr
collection.set()はidに応じてadd, remove, changeイベントを起こす
on()
off()
trigger()
trigger()は複数のイベントを起こすことができる
obj.trigger('event1 event2', 'arg')
listenTo()は他のオブジェクトで発生したイベントを受け取る
listenToOnce()もある
stopListening()はlistenTo()をやめる
view.eventsに登録することもできる
Serverとの通信
ModelやCollectionのurlにアクセス先を指定する
parse()はサーバーから送られてきたデータを変換する
collection.fetch()で{reset: true}を指定するとresetする
save()はPUTメソッドでリクエストを送る。{patch: true}にするとpatchメソッドにする。validate()を実行する
destroy()はDELETEメソッドを送る
Router
document
Backbone.Router.extend()でrouterを生成した後、Backbone.history.start()する
routesでurlとコールバック関数をマッピングする。
router.navigate()はリダイレクトのようなもの
デフォルトではリダイレクト先のコールバック関数を実行しない
{trigger: true}でリダイレクト先のコールバック関数を実行する
{replace: true}で履歴を上書き
router.execute()はマッチするたびに実行される関数
デフォルトのルーティングは’*path’: ‘default_func’
すべてのイベントを捕捉
Model,View,Router,Collectionに下記のイベントを登録する
this.on('all', handler);