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
-, , ,

執筆者:

関連記事

Rails3.2でユーザー管理機能を追加~Devise

By: Mark Strobl – CC BY 2.0 目次1 前回2 generate3 routes.rb4 index.html.erb5 new6 create7 edit8 up …

ElasticSearchをRubyから使う~elasticsearch-ruby

By: Harry Rose – CC BY 2.0 目次1 gem elasticsearch-ruby2 環境3 インスタンス作成4 メソッド一覧5 情報取得6 ドキュメントの作成7 …

Rails3.2.8でテーブル並び替えのテストを作る~cucumberと正規表現

前提 Railsのテーブル並び替えを実装する Rails3.2.8で自動テスト環境を整える〜cucumber+spork+guard 目次1 作戦(ストラテジー)2 have_contentの正規表現 …

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

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

RailsでECサイト構築7 デプロイ~spree+apache2+passenger

  前提 Rails3.2のアプリをデプロイ~apache+passenger+postgresql Rails3.2+Apache2+Passenger環境でSSLを使ってみる &nbsp …