JavaScriptエンジニア養成読本

Backbone.js

モデルの定義

var Model = Backbone.Model.extend({
  defaults: {
    hoge: 'fuga'
  }
});

綺麗に表示する

console.log(JSON.stringify(hoge, null, 2));

初期化処理の実装

initialize: function() {
  console.log('初期化されました');
}

属性値の取得

model.get('hoge');
model.attributes.hoge;

model.set('hoge', 'fuga');

model.has('hoge');

イベントの監視

model.on('change:email', function() {
  console.log('email属性が変更されました');
});

model.on('change', hogeFunction());

モデル初期化時にイベント監視を始める

initialize: function() {
  this.on('change', function() {
    console.log('属性が変更されました');
  });
});

イベントの監視の解除

model.off();
model.off('change');
model.off(hogeFunction);

validate()による検証

validate: function(attrs) {
  if (!attrs.firstName || !attrs.lastName) {
    return '苗字と名前の両方が必要です';
  }
});

model.set({ lastName: '' }, { validate: true }); // => false

Backbone.Collection

var contactCollection = Backbone.Collection.extend({
  model: Contact,

  initialize: function() {
    console.log('ContactCollectionが初期化されました');
  });
});

contactCollection.add([alice, bob]);

console.log(contactCollection.length) // => 2

Underscore.js

each(), map(), reduce(), filter()などを使うと配列を便利に扱える。 _.each(someArray, function() { ... })のように使用するが、コレクションに対しては直接呼び出すことができる

Underscore.jsのメソッドの呼び出し

contactCollection.each(function(contact) {
  // do something
});

var filtered = contactCollection.filter(function(contact) {
  return contact.get('age') >= 30;
});

データの永続化―urlプロパティの定義

var ContactCollection = Backbone.Collection.extend({
  url: '/contacts',
  model: Contact
});

// コールバック関数の指定①
var contactCollection = new ContactCollection();
contactCollection.fetch();

contactCollection.fetch({
  success: function(collection) {
    showContact(collection);
  }
});

// コールバック関数の指定②
// jQuery Deferredが返すPromiseオブジェクトを利用して
// コレクションのfetch()が完了後に次の処理を行う例
contactCollection.fetch().then(function(collection) {
  showContact(collection);
});

// コールバック関数の指定③
// 複数のモデルとコレクションによるfetch()が完了した後
// 次の処理を行う例
var fetchingContactCollection = contactCollection.fetch();
var fetchingOtherData = otherData.fetch();

$.when(fetchingContactCollection, fetchingOtherData)
  .then(function(collection, otherData) {
    // do something
});

リソースの新規作成(POSTリクエスト)

contactCollection.create({
  firstName: 'Alice',
  ...
});

// ↑クライアント側で新しいデータが作られた(IDはまだ持たない)のでPOSTリクエストになる
// 例: POST http://localhost:4567/contacts

リソースの更新(PUTリクエスト)

var contact = contactCollection.get(1234);

contact.save({
  lastName: 'Sanders'
});

// サーバ側のリソースが作成済みなので
// PUTリクエストが行われる
// 例: PUT http://localhost:4567/contacts/1234