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

執筆者:

関連記事

Backbone.jsのためにRails3.2でJSON APIをつくる~RABL

RailsでECサイト構築6 固定ページを作る~spree

  ECサイトを作成するときには日本の法律にしたがって色々と表示しなければならない 表示しなければならないことについては次のページが詳しかった 本サイトについて 実際のECサイトをみれば実例 …

Railsでajaxなテーブルを使う~datatables

    github.com/rweng/jquery-datatables-rails 目次1 Gemfile2 application.js3 application.css4 …

Rails4でのJSONテンプレート~jbuilder+rabl+ruby

By: Wonderlane – CC BY 2.0[/caption] Rails4からJSONも標準でjbuilderを使ってテンプレートから出力できるようになった けど、しっくり来な …

Rails3.2でTwitterBootstrap導入のあれこれ

  目次1 sass-rails-bootstrap導入2 Layout関係3 Notification4 confirmをmodalにする5 SimpleForm導入6 kaminari導 …