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の場所がずれる問題

 

参考

Building a shared calendar with Backbone.js and FullCalendar: A step-by-step tutorial

参考リンクをみながらCRUDのうちREAD、CREATE、UPDATEの一部だけやってみた

 

READ ~データベースからイベントを読み込んでカレンダーに表示する

viewの準備~backbone.jsからfullcalendarを表示する

Gemfile

bundle

generate

テスト関係は長くなるので省略します

あと、ルートを calendar#index にして、public/index.htmlを削除しておく

index.html.erbは1行だけ

アプリ名.js.coffee

router

このあたりは今後リロードしても初期化しないように色々つくってみたい

* イディオム

普通は、上位の部品からview = new Classして、$(‘くっつけたい場所’).append(view.render().el)として、クラスの定義では、$(@el).html(@template())とか@elをつくるんだけど、今回はそれではうまく描画されなかった

参考リンクでは@elにjQueryオブジェクト$(‘#calendar’)を渡してたんだけど、それもなぜかうまく描画されなかった

今回は、elに’#calendar’を渡して、クラスの定義では、$(@el).fullCalendar ~を使っていくのがうまい感じだったので多用した

calendar_view.js.coffee

今回必要なのは週表示なのでagendaWeekを使う

どや

selectHelperで選択した時間が表示されるのがいい感じ

2013-01-26_00h29_30

Railsでイベントデータを準備する

今回イベントという言葉が2種類出てくるけど、1つはカレンダーに登録するイベントモデル、もう1つはJavascriptのクリックイベントとかのイベント 混乱しないようにしたい

で、カレンダーに登録するほうのイベントモデルだけどagendaWeekを使う場合は参照先の要素のほかにallDayを定義しないとうまく時間軸に表示されない(allDayがundefinedだとうまくいかないfalseと明確に代入しないといけない)

allDayの命名法則がrailsと違うけど、そのままJSONにすればfullcalendarプラグインが認識してくれるので手を抜いたやむを得ないよね

railsのフォームから2,3個適当にダミーデータを作っておく

Railsからデータを取得してイベントをカレンダーに表示する

簡単にモデルとコレクションを作る

 

で、router → calendar_viewとコレクションを渡していく

 

ただ、このコレクションをまとめてという方法は結局取らずに、イベントを1個1個viewに渡す方法をとった

ちょっと遅くなった気がするけど、1個1個のビューにイベントを設定できるので書きやすいから

これは後でまた

これでイベントがカレンダーに表示されるはず

普通に時間を指定してもいいし、予定が重なっていたら重ねて表示してくれる

もちろん複数日にわたるイベントも対応!

すばら

2013-01-26_00h42_25

 

allDayをtrueにすれば終日イベントにできる

もちろん終日イベントも複数日に対応

( ・´ー・`)どや

2013-01-26_00h42_36

 

CREATE~カレンダーからイベントを登録する

selectイベントを取得する

うえでselectableをtrueにしてるので、selectイベントを取得できる

 

*thisの保持

@はJavascriptのthisなんだけど文脈的にはインスタンス自身(やクラス自身)を指したいことが多い

例えば、@collectionとしてインスタンスが保持してるcollectionプロパティをみたいとか

けど、コールバック関数なんかではthisはインスタンス自身を差さないので、@がうまく使えない

こういう場合にthisを保持するにはいくつか方法がある

1つはCoffeeScriptのファットアロー(=>)を使う方法、もう1つはBackbone.jsが_系の関数を使うときに第三引数として束縛先にthisを指名できるようになっている

例えば、@collection.onでイベントを監視するときに

とか書いて、addAllの方で@がインスタンス自身を指すようにするというのは常套手段になっている

jQuery UI ダイアログをつかってフォームを表示する

 

Backbone.jsからjQuery UIのDialogを使う例

 

と参考ページを見ながらつくった

@elをremoveしないとcancelでいくつもフォームが追加されてしまう

 

フォームの呼び出しはこれ

 

データをデータベースに登録する

これはもう書いたけどcreateを使った

*作成したイベントをUPDATEするには{wait: true}オプションが必要

追加したイベントをカレンダーに描画する

CalendarViewでコレクションへのaddを監視して

‘renderEvent’で描画すればよし

* 第3引数としてstcikをtrueにしておかないと、カレンダーを切り替えた時にイベントが消えます

arshaw.com/fullcalendar/docs/event_rendering/renderEvent/

UPDATE1~カレンダーのイベントをクリックしてイベントを編集する

clickイベントを取得する

ここでイベントの描画の仕方を変更した

calendar_view.js.coffee

event_view.js.coffeeを作成

calendar_viewにイベントクリックを設定

ここがはまった第1のポイント

@model.save()で保存するには、new ClassじゃなくてcollectionからgetしたModelを代入しないとダメ

コレクションの方はidのあるなしで判断してるけど、こっちはnew したModelインスタンスにidがあってもupdateしてくれない

ちゃんとcollectionのメンバーに対してsaveしないとうまく保存してくれない

*この問題の解決策かも

Identity Map for Backbone.js Models

An Identity Map for Backbone.js

 

あと、ModelにrootUrlを設定しないとエラーが出る

フォームを流用する

当然だけどCreateとUpdateでは微妙に処理が違う

最初は継承で処理しようと思ったけど、参考先がModelのisNew()を使って分岐していたので、それをまねした

 

データをデータベースに登録する

うえで出てきたとおり@model.save()でアップデートするようにした

コレクションのupdateとかfetchとかをうまく使えばもっとスマートに行く気がするけど、updateにarrayを引数にする使い方がよくわからなかった

追加したイベントを描画する

これが描画の仕方を変えたポイント

1個1個のイベントのモデルについて変更を監視して、そのモデルについて発火を確認している

そしてハマったポイントの第2

updateEventは、もともとのイベントを引用して作らないとダメ

rendarEventのようにJSONを渡してもアップデートしてくれない、エラーも返してくれない

参照リンク先がなければ詰んでた

あとは、ドラッグイベントとリサイズイベントによる更新をやってみたい

 

*やりました!

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

 

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

執筆者:

関連記事

TwitterBootstrapとGoogle Code Prittifyでうまくハイライトされないらしい

Electron+Browserify(debowerify)+jQueryUi

By: Wilson Hui – CC BY 2.0 目次1 bower install2 browserify(debowerify)3 require4 jQueryUIをMarion …

Mac OSXにHyper EstraierのRuby Bindingをインストールする

By: Kanko* – CC BY 2.0 目次1 環境2 Hyper Estraierのインストール3 ソースのダウンロード4 パッチを適用する5 rvmのためにconfigureファ …

no image

Rails3.2からBackbone.jsとD3.jsを使う一例

目次1 Backbone.jsからD3.jsを使う2 RailsのネストしたURLでBackboneを使う Backbone.jsからD3.jsを使う d3.jsで力指向グラフを使って遊ぶ2のクラス構 …

no image

Rails4とPostreSQL9.3で全文検索〜pg_bigm

目次1 準備2 migration3  使い方 準備 エクステンションを導入しておく Ubuntu Server12.04でPostgreSQL9.3をつかう〜pg_bigmで全文検索 migrati …