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とD3.jsでローソク足グラフを描く〜Rails準備編

By: Manuel Calavera – CC BY 2.0 前回 Rails4で複雑な検索〜Ransack こちらのサンプルを使用させてもらいました。 datawarehouse.we …

Rubyでd3.jsのapiリファレンスの一覧を取得してくる~mechanize

  d3.jsにはlayoutというおおまかに準備されたレイアウトがあって、その中にあるTreeレイアウトを試してみることにした d3.js自身のapiリファレンスが階層構造になっているので …

jQuery UIで将棋を再現(まだ見た目だけ)

  何年か前にニコニコ動画でみた1時間でオセロをつくる動画をみた. なら将棋もできそうじゃね!?と思って1時間で区切ってやってみたら ゲームまではできなかった.自分がやったら丸2、3日は必要 …

no image

Rails3.2でajaxなフォルダツリーを導入する4~dynatree-rails & Drag’n’Drop

wwwendt.de/tech/dynatree/doc/dynatree-doc.html wwwendt.de/tech/dynatree/doc/samples.html 今日はドラッグアンドド …

Rails3.2でフォームの順番をjQuery UI sortableで並べ替えてSubmit~acts_as_list