0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Backbone.js メモ2

Last updated at Posted at 2017-09-10

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リクエストを送りたい場合、コレクションをリセットしたい場合などオプション利用でいろいろコレクションの変更・削除方法が変えられる
0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?