Backbone.js Lesson#1 – 各種用語の理解 -

フロントエンドJavascriptのMVCフレームワークであるBackbone.jsについて勉強し始めました。

メモ代わりにちょこちょこ更新していこうかと思います。

(理解が進んだら追記していくつもりです。)

 

まずは用語の理解から。

Model、Collection、View、Routerの、重要と感じたプロパティやメソッドについて。

 

Model

データを扱う。

プロパティ

defaults

属性の初期値を設定する。

initializeメソッドでは動的な値、defaultsプロパティでは静的な値を取り扱うイメージ。

defaults: _.extend({})とすることで、親のdefaultsに追加して属性を定義できる。

urlRoot

Backbone.jsでは、サーバ側がRESTで設計されていることを期待したHTTPリクエストでCRUD操作を行う。

サーバ通信を行うModelではurlRootプロパティを設定する必要がある。

メソッド

initialize

初期値の設定などを行う。

モデルオブジェクト生成後に呼び出される。

validate

バリデーションを行う。

undefined以外の値が返った時エラーと判定される。

属性の設定時に実行される。

保存時のみ実行したい場合は、setメソッドにsilentオプションを付け、保存時にisValidateメソッドでvalidationを行う。

on

モデルに対してなんらかのアクションがあったときの処理を定義することが出来る。

 

Collection

ModelのArrayのような感じ。

プロパティ

models

modelの一覧を参照できる。

メソッド

add

モデルを追加する(modelsの末尾に追加)

atオプションによりindexを指定した挿入も可能

配列で複数追加も可能

conparator

挿入のルールを決められる。

id属性値順で挿入したければ以下のようにする。


comparator: function(model){ return model.get("id"); } // id属性値の昇順となるように挿入される

at

インデックスを指定してモデルを取り出す。

remove

インスタンスを指定して削除

例: col.remove( col.at(0) );

create

コレクションへの追加と同時にサーバへのPOSTを行う

 

View

HTMLを描画する。

プロパティ

tagName

任意のタグを指定できる。

デフォルトではdiv。

id, classname

idとクラス名

attributes

その他の属性

el

id等で描画する位置を指定する。

elプロパティに格納された要素は、$elとすることでjQueryオブジェクトとして参照できる。

events

イベント名、セレクタ、メソッドを指定する

例:


events: {
 "click p": "show_message"
 },

model

紐づくモデルを指定する

メソッド

render

描画を行う。

描画先(elプロパティ)が設定されていなくても呼び出せる。その場合、描画先が設定されると同時に描画される。

thisを返すことでメソッドチェーンで繋ぐことができて、elも参照できる。

 

Router

URLに対応するメソッドを設定することができる。

Backbone.historyオブジェクトのstartメソッドで稼働する。

使用例: #timeline にアクセスするとshow_postsメソッドが実行される


var MyRouter = Backbone.Router.extend({
routes: {
"timeline": "show_posts"
    },
    show_posts: function({~~~})
 });
 new MyRouter;
 Backbone.history.start();


 

終わりに

自分用のメモみたいな感じなので、凄く役に立たないかも…

徐々に整えていきます。