04: Collectionの実装

1. コレクションのクラスをつくる

前回つくったApp以下にSchedulesコレクションをつくります。このとき、Backbone.Collection.extendの引数のmodelプロパティにモデルクラスを指定します。

js/model.js

App.Schedule = Backbone.Model.extend({
  //（略）...
});

App.Schedules = Backbone.Collection.extend({
  model: App.Schedule
});

これでApp.Scheduleモデルクラスを子要素に持つコレクションクラスが定義されます。

2. インスタンスをつくる

モデルと同じように、コレクションもnewでインスタンス化して利用します。（Modelの動作確認のコードは削除して構いません）

js/app.js

window.App = {};

$(function() {
  var schedules = new Backbone.Collection();
});

3. データを追加する

addメソッドでデータを追加することができます。追加されるデータはmodelに設定したモデルによって初期化されます。

js/app.js

window.App = {};

$(function() {
  var schedules = new App.Schedules();

  schedules.add({
    title: '打ち合わせ',
    datetime: moment('2013-10-26 15:00')
  }, { validate: true });
});

4. データ追加のイベントを捕捉する

データを追加するとaddイベントが発火し、追加されたモデルが渡されます。また、データの追加に失敗した場合（モデルのバリデーションが通らなかった場合など）はinvalidイベントが発火します。

js/app.js

window.App = {};

$(function() {
  var schedules = new App.Schedules();

  schedules.on('add', function(model) {
    var $p = $('<p>').html(
      model.dateFormat('MM月DD日 HH時mm分') + '：' + model.get('title')
    );

    $('body').append($p);
  });

  schedules.on('invalid', function(model, message) {
    alert(message);
  });

  schedules.add({
    title: '打ち合わせ',
    datetime: moment('2013-10-26 15:00')
  }, { validate: true });

  schedules.add({
    title: '勉強会',
    datetime: moment('2013-10-27 20:00')
  }, { validat: true });
});

ブラウザで表示して予定が二件表示されれば成功です。