bootstrapのmodalダイアログオープン時に引数を渡したい。

ダイアログのタイトルだとか内容のテキストだとかを
設定してからオープンさせたい場合、jqueryとかでidを強引に書き換えてやれば
いいのだが、それだと密結合な感じになってしまうので、イベントを駆使していろいろ頑張ってみた。

まず、ダイアログ側、こんな感じでdivタグがかかれている。

<div class="modal hide" id="myModal">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <span id="modalHead">Modal header</span>
  </div>
  <div class="modal-body">
    <span id="modalBody">One fine body</span>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary" data-dismiss="modal">Save changes</a>
  </div>
</div>

上の、modalHeader部分とmodalBody部分を引数を渡して
好きな形で設定できるようにしたい場合、
まず、initializeイベントというカスタムイベントをmyModalエレメントに
設定してあげる。
initializeイベントにはhead、bodyというプロパティを持つオブジェクトが引数として渡される。

<script type="text/javascript">
$(function(){
  $('#myModal').on('initialize',function(event,initObj){
    $('#modalHead').text(initObj.head);
    $('#modalBody').text(initObj.body);
  });
});
</script>

bootstrapのモーダルダイアログには表示されたとき、隠されたとき等のイベントが
設定されており、それらが呼ばれたときのコールバック関数等を設定できる。
それを利用して、表示された時に上記のinitializeイベントをトリガーする処理を書けば
引数を設定してダイアログが呼ばれるという寸法になる。ここでは
showというイベント発生時に、headText,bodyTextというidのテキストボックスから
ダイアログのタイトル、内容を設定してダイアログを表示させている。

<script type="text/javascript">
$(function(){
  $('#myModal').on('show',function(){
    var initObj = {
      head: $('#headText').val(),
      body: $('#bodyText').val()
    };
    $('#myModal').trigger('initialize',[initObj]);
  });
});
</script>

このやり方だと、呼び出し元の画面はmodalHeadやmodalBodyといった
ダイアログ側のIDを知らずに、javascriptのデータとしてダイアログのタイトルや
内容を渡せるのでゴリゴリ書くよりは多少は疎結合になるはず。
（少なくとも同じダイアログ画面をいろんな場所で使っていて、IDが変わってしまった時などは
ダイアログ側だけ直せば良いと言う形になる。）