日報 #45 - BackboneでModal

目下シコシコWEB作成中。
くっそな程時間がかかっていますが、
やっぱりHTML、CSSはドキュメント用のマークアップなんだな、
アプリケーションには向かないなと思う日々です。

さて、今日は往年の困りもの、モーダルについて。
ユーザに確認を求めたりアラートをだしたりするときに、
ブラウザ上でポップアップしてくるウィンドウを、僕はモーダルと呼んでいます。
なんか背景が白くなって、、、みたいな奴。
アプリケーションとしてみたら、かなり当たり前なアクションですが、
HTML教授とCSS准教とJavascript講師にかかると結構うざったくなります。

あれのプラクティスというかモジュールjqueryは世界にゴマンとあって、
色々と試してきましたが、どれもすげぇ使いづらいなぁという印象でした。
なんか、多言語対応だったり、複数のモーダル表記だったり、
ウィザードだったり、中でのiframe展開だったり、
全部に上手いこと合致しつつ、なによりも「管理と呼び出しが楽！」っていうものをずぅぅっと探しておりました。 jQuery-UIのmodalは結構近かったんですが、にしても呼び出しが鬱陶しいし、
何よりBackboneと相性が悪いことこの上ない感じでした。

ということで、「いいモーダルないな、自殺自作しようかな」と思っていたら、
Backbone.Modalなるものを発見。
http://awkward.github.io/backbone.modal/
Backboneユーザからすると物凄い使い勝手よいです。
モーダルウィンドウへの変数渡しとかも、Backbone.Model型で渡せるので、
listenしたりするのもお手の物です。
しかもウィザードやらなんやら、ボタンのイベントリッスンもすごい楽に出来てます。

僕は大体こんな感じで使ってます。

// backbone modalview.modal=Backbone.Modal.extend({  template: _.template($('#modal-template').html()),  cancelEl: '.bbm-button'});


// eventview.listenTo(view.model, 'hoge', function(arg) {  var modal_view= new modal({model:new Backbone.Model(arg.data)});  $('#modal').html(modal_view.render().el);

});

これだけできれいなモーダルです。
何よりも憎いのは

new modal({model: new Backbone.Model()});

このへんですね。
ありがたやありがたやという感じです。
例にも寄ってCSS部分は鬱陶しいですが、それはまぁどれも一緒ということで、、、
さて、線路は続くよって感じで今日も明日もまた頑張ってきましょう。