Backbone.jsにおけるMediatorパターン

業務でBackboneを使っていると、
「View通しの連携をどうしよう。」と悩んだことがありました。

そんな僕が着いた先は、Mediatorパターンによるイベントの連携でした。
調べたこと～サンプル実装までをまとめておこうと思います。

Mediator パターンとは

Mediator とは、英語で「仲裁人、調停者」を意味する単語です。
Mediator パターンとは、多数のオブジェクトの間の調整を行いながら処理をすすめる必要が ある場合に利用すると威力を発揮するパターンです。

ちゃんとしたMediatorパターンでもない気がするけど。。。ま、いっかｗ

まずは、実装のサンプルから

サンプルでやりたいことは、以下のとおりです。

1. ViewAで作成したボタンオブジェクトをクリック
2. ViewBがそれに反応して変わる

（HTMLは省略してます。）

// mediatorの作成
window.App = {};
App.mediator = _.extend({}, Backbone.Events);

// ViewAの定義
var ViewA = Backbone.View.extend({
  events: {
    'click #buttonA': 'clickA' // １．クリックイベントを取得
  },
  render: function() {
    this.$el.append($('<button></button>', {
      text: 'click me!!',
      id: 'buttonA'
    }));
    return this;
  },
  clickA: function() {
    // ２．イベントが発生したことをmediatorに伝える
    App.mediator.trigger('clickA');
  }
});

// ViewBの定義
var ViewB = Backbone.View.extend({
  initialize: function() {
    // ３．mediatorを購読している、Viewのイベントが発火
    this.listenTo(App.mediator, 'clickA', this.clickA);
  },
  render: function() {
    this.$el.append($('<b></b>', {
      text: 'view B!!',
      id: 'target'
    }));
    return this;
  },
  // ４．実行される関数
  clickA: function(){
    this.$el.find('#target').text('clicked!!')
  }
});


// 描画
var viewA = new ViewA();
var viewB = new ViewB();
$('#MyApp').append(viewA.render().el);
$('#MyApp').append(viewB.render().el);

解説もどき

mediator自体はグローバルな領域に定義されているので、
どのViewからも参照できます。
viewB～FまでlistenToでclickAを購読しておけば、全て反応させる事もできました。
（どんな順番で実行されるかは未確認。）
実際に動きを見たい方は、こちらへ

また、triggerで引数を渡す場合は、

App.mediator.trigger('clickA', 'クリックされました');

のように、書けばOKです。

とりあえず、以上。
なんかイマイチな記事になった；