Backbone.js jQuery UI Railsで使えるGem

Rails3.2とBackbone.jsでGoogle CalendarライクなカレンダーにCRUD(後編)~fullcalendar-rails

投稿日:2013年1月26日 更新日:

 前回

Rails3.2でGoogle Calendarライクなカレンダーを使う〜fullcalendar-rails

FullCalendarのagendaViewでselectの場所がずれる問題

Rails3.2とBackbone.jsでGoogle CalendarライクなカレンダーにCRUD~fullcalendar-rails

 

 

 

UPDATEの修正とドラッグとリサイズによるイベントデータの更新・データの削除を実装してみた

UPDATE1~バグの訂正

1 ダイアログをきちんと消す

キャンセルのときのほかにダイアログを開いておいて、ほかのダイアログを開いたときにidがかぶってしまうバグがあった

dialogはインスタンスに1つにして、作る前に、もしあったら最初にremoveしておくようにする

 

2 アップデートのときもともとのcolorの値をフォームに入力しておく

jQuery UI Buttonsetの選択状態を変えたり、色を変えたり

ダイアログを開く直前に色をjQueryで確認してチェックしておく

UPDATE2 ~ ドラッグとリサイズでデータ更新

Google Calendarでお馴染みの操作だけど、イベントをドラッグしたり、リサイズしたら、そのデータでデータベースを更新する

これは元ネタから

イベントを設定して

 

コールバック関数に新しいイベントの値が渡されるので、その値でsaveすればOK

問題は終日イベントから普通のイベントに変わったとき終了時刻が取れないので、適当に2時間後を設定するようにした

これはfullcalendarのページにあったXDateというライブラリを使ってみた

DELETE~イベントの削除

フォームにDELETEボタンを追加

新規追加でなくイベントのアップデートのときだけ、Deleteボタンを追加する

 

 

これもネタ元からのアイデア

buttonsというハッシュを作って、@model.isNew()がfalseのときだけ、{“Delete” : =>削除関数}というハッシュを追加する(deleteの場所が気にいらなければ追加の順番を変えるとか)

ネタ元は_(アンダースコアという便利ライブラリ)のextendを使ってる

データを削除する関数

とりあえず

とりあえずというのはモデルを削除するだけじゃなくて、コレクションからremoveしておかないといけないという話もあるので

ネタ元もこうだし とりあえずは消えてるようなのでよしとする

イベント削除の描画

イベントビューにモデルの削除を監視させておいて、fullCalendarの関数で消す

fullCalendarの”removeEvents”はイベントをすべて削除するかidを指定したらそのイベントを消す

 

 

バグがあった → 解決しました!

* 症状

ネタ元でも未解決

症状は、普通のUPDATEは問題ないんだけど、新規作成したイベントをそのままUPDATEしようとすると、idがundefinedなのでエラーになるってもの

いろいろログを出してみたら、save後にon addでコールバックされたEventモデルは保存後なのでidを持ってるけど、toJSON()するとidがundefinedに変わってることが判明した

このrenderメソッドは初期描画にも使ってるんだけど、データベースから持ってきたデータのときはtoJSONしてもきちんとidを吐き出すことがわかった

とりあえずネタ元に報告しておいて誰かレスつけてくれるのを待とう

* 解決

原因は、createのとき、データセーブが非同期に実行されるからデータが同期してidが付与される前に”add”イベントが発火するかららしい

解決は、createのときに{wait: true}オプションをつけるだけ

 herokuにサンプルアップ

* Production環境でも動くかどうか試すためにサンプルをherokuにあげました

glacial-retreat-8964.herokuapp.com/

-Backbone.js, jQuery UI, Railsで使えるGem
-, , ,

執筆者:

関連記事

Rails4.1に対応したRefinery CMS 3.0を試してみた

By: Alexis Madrigal – CC BY 2.0 目次1 Refinery CMS2 Gemfile3 generate4 configファイル5 起動6 管理画面7 トラブ …

sunspot_railsで全文検索

sunpotはsolrというJava製の全文検索サーバをrubyから使えるGem sunspot_rails はsunspotにマージされてました 参考 railscasts.com/episodes

CarrierWaveで添付したファイルをrroongaで全文検索

By: Alan Levine – CC BY 2.0 目次1 Carrierwave2 rroonga3 Gemfile4 application.rb5 config/initiali …

Backbone.js0.9.10以降のクライアントサイドでのvalidate

Underscore.jsのリファレンスなどのリンクメモ

By: Anne-Lise Heinrichs – CC BY 2.0 Underscore.jsは便利な関数ライブラリ. Backbone.jsが依存している.一部でアンスコと呼ばれてい …