JavaScript
Backbone.js
mvc
More than 1 year has passed since last update.

Backbone.js アプリケーション開発ガイド

この本を買ったので読んだ内容で理解したものをまとめていく。

第3章 モデル、ビュー、コレクション

モデル

  • アプリケーションで利用されるデータとこれに関連するロジックが含まれる
  • ゲッターとセッターがある
    • セッターを使うとchangeイベントが発生する
  • モデルの変化の監視ができる
    • initialize関数の中でリスナー追加すると便利
  • データの検証
    • save()メソッドでモデルが永続化されるときと、{validate: true}を指定しset()が呼び出された時に検証が行われる
    • Model.validate()

ビュー

  • モデルがどのように表示されるかを定義したロジックが記述される
  • el
    • DOM要素への参照
    • tagnameでDOM要素指定(デフォルトdiv)
    • view.\$el = $(el.view)
    • view.\$(selector) = $(view.el).find(selector)
    • render()
      • 処理の終わりにthisを返すのが一般的
    • eventsオブジェクト
      • 要素でのイベントとリスナーとの対応わけができる
      • _bindを使えば自分でメソッドの関連付けができる

コレクション

  • モデルの集合
  • add、remove
  • idを指定してgetメソッドでモデルを取り出せる
  • クライアント-サーバ型のアプリケーションではサーバから取得した値がコレクションにセットされる
  • モデルのcid属性はモデル生成時にBackbone.jsが自動生成されるもの
  • idAttributeはサーバから返されるモデルの中でどの属性を識別子として使うべきかをしてするために使われる
  • イベント監視
    • モデル追加:addイベント
    • モデル削除:removeイベント
    • モデル変更:changeイベント
  • Collection.resetでコレクション全体を置き換えられる(resetイベント発生)

RESTに基づく永続化

  • RESTに基づいたサーバとの動機処理を簡単なコードで実現できる
    • Collections.fetch()でサーバからコレクションのデータを取得できる
    • サーバから取得したモデルのsave()でPUT形式のHTTPリクエストが送信される
    • ブラウザ側で生成されたモデルのsave()ではPOST形式のHTTPリクエストが送信される
      • モデルのsave()は内部でvalidate()を呼び出す
    • destroy()でサーバからモデルの削除(DELETE形式のHTTPリクエスト送信)
    • オプションPATCH形式のHTTPリクエストを送りたい場合、コレクションをリセットしたい場合などオプション利用でいろいろコレクションの変更・削除方法が変えられる