Backbone.Collectionでデータをフィルタする

テキスト入力でデータをフィルターする機能を実装するのに、Backbone.Collection#whereを使って実装してみるメモ。

// ------------ Model/Collection 定義
var Message = Backbone.Model.extend({
  id: 'msg_id',
  // 属性はこんなの
  defaults: {
    sender: 'anonymous',
    text: '',
    createdAt: new Date()
  }
});

var Messages = Backbone.Collection.extend({
    url: '/api/v1/messages',
    model: Message,
    // 大文字小文字無視してデータを検索する
    whereSender: function(name) {
      var senders = _.uniq(this.pluck('sender')),
          exp = new RegExp($.trim(name), 'i'),
          fName = _.find(senders, function(n) { return n.match(exp); });
      return this.where({sender: fName});
    }
  });

// -------------- 使う方
// データのfetchとかしておく
var messages = new Messages();
messages.fetch();

[… snip …]
// clickやらkey event等が発生したら、フィルター用のテキスト入力を取得
var inputSender = $(':text').val();
// フィルターしたデータを再度Backbone.Collectionにする.
filterdMessages = new Message(messages.whereSender(inputSender));
[… snip …]