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

執筆者:

関連記事

no image

Ubuntu Server 12.04で動画のサムネイルを作成~avconv ffmpeg

  目次1 インストール2 動画の情報3 使えるフォーマットの一覧4 サムネイル画像の作成 インストール

総合的な動画の変換 …

Rails4.0で添付したpdfファイルの中身を全文検索の対象にする〜carrierwave、pdftotext、pg_bigm

By: Uncalno Tekno – CC BY 2.0 環境 Ubuntu server 12.04 sunspot_cellにしようとおもってたけど、ライブラリとか勉強することが多く …

Rails4.2で簡単にマテリアルデザインを使えるmatelializeを試してみた〜matelialize

By: Basheer Tome – CC BY 2.0 目次1 マテリアルデザイン2 matelialize3 Gemfile4 application.scss5 applicatio …

Backbone.jsで関連するモデルのREADとCREATE

By: woodleywonderworks – CC BY 2.0   ThoughtBotの本を読み進めてるけど私には買ってよかったと感じている ゾンビviewのワナを回避す …

TwitterBootstrapでアイコンが微妙な感じだったらFontAwesomeを試してみるといい

かもしれない fortawesome.github.com/Font-Awesome/ hallojsで使ってるのは上 github.com/bokmann/font-awesome-rails gi …