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