Backbone.js Railsで使えるGem

Rails3.2でBackbone.jsとPrivate_pubでToDoアプリをリアルタイム化(できた!)

投稿日:

参考

Rails3.2でリアルタイムメッセージング~Private_pub、Faye

Rails3.2とBackbone.jsでToDoアプリを作ってみた~backbone-on-rails

 

ToDoアプリのリアルタイム化に挑戦している.

Backboneアプリの仕組みが、①クリック系のイベント→②コレクション・モデルの変更(コレクション操作系のイベント発火)→③見た目の変化だけど、①クリック系のイベント→②モデルの作成変更→③データベースのデータ変更からパブリッシュ(Rails)→④利用者全員のコレクションを変更(コレクション操作系のイベント発火)→⑤見た目の変化の流れにすれば、リアルタイム化できるはず

Private_pubのセットアップ

 

  1. Gemfileへの追加とbundleの実行
  2. private_pub.ymlの設定
  3. private_pub.jsの読み込み application.jsに//=require private_pubを追加
  4. 購読の設定 index.html.erbに<%= subscribe_to “/tasks” %>を追加 *チャンネルは/から始まらないと動作しなかった

ここまでは前と同じ

コントローラーからJavaScriptをpublishする

追加アクション

createアクション

*訂正

idを配信すること、事前にsaveすることが必要だったので次のように訂正した

idを配信しないと、セーブするまでそのモデルオブジェクトにはidが振られないので、ほかのイベントなどでidを使っていると変な作動を起こしてバグのもとになった

saveを先にしないと、その後のPOSTやPUTなどのリクエストで404エラーが出た
respond_toを実行してないのかと思ったけど、loggerの”Saved !!!!!!”っていうログは出るので実行はしているみたい
なんで404エラーになったのかその理由は未だにわかってない

(あと、よく考えたらpublish_toもif saveで囲んでおくべきだった)

 

コレクションインスタンスをグローバル化してるので、コントローラーが発行するJavaScriptからも扱える

追加イベントの変更

追加イベントはモデルのデータベースの変更まで

コレクションの変更にイベントを設定

 

削除アクション

destroyアクション

削除イベントの変更

削除イベントはモデルの削除まで

上のインデックスアクションでremoveイベントが起きたらインデックスを再描画する

 

できたのはここまで

collectionにchangeイベントがなくて困った。。。

アップデートアクションが作れない

 

 

 

アップデートアクションはクリエイト(修正版)の仕組みを参考に.Backbone.jsのコレクションのaddはidがなければ新規作成、あれば無視。ただし、merge.trueのオプションを設定したときはmergeされる

なぜ失敗したかというと、mergeだと真偽値はいったん真になると何を足しても(mergeしても)真を返すから

*よく考えたらできた 2ステップにわけてidでコレクションからモデルオブジェクトを呼んで値をセットしたらよかった

 

 

イベントはeachで分解した各Modelオブジェクトに設定した

 

以上でリアルタイムに追加・更新・削除がいちおうできた

 

と思ったら、新しく追加したTodoがどんどんコピーされてしまうバグがあった.

 

コレクションをイベント発火に使うのはダメなんだろうか

代案としては、コレクションはsilent:trueでこっそり書き換えて、ほかのtriggerでイベントを発生させるとか?

作成・更新・削除ごとにチャンネル作って、そこにJSON流して、データを処理するサブスクライバをModelに書くとか?

*良記事ぽいの発見 あとで読む

stackoverflow.com/questions/9984859/backbone-js-can-one-view-trigger-updates-in-other-views

メモ2 バージョン0.9.10でcollectionにupdateメソッドが追加された

backbonejs.org/#upgrading

Adding Real-Time to Rails With Socket.IO, Node.js and Backbone.js (With Demo)

 

Backbone.jsのメソッドと発火されるイベントの対応

 

 

 

 

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

執筆者:

関連記事

Rails3で帳票印刷を試す~thinreports

  www.thinreports.org/ github.com/thinreports/thinreports-rails3-example 目次1 とりあえずサンプルを試してみた2 ソ …

no image

Carrierwaveでpdfのサムネイルを作成する

Rubyでデータクリーニング~mechanize & active_support

  オライリー・ジャパンから「d3をはじめよう」という本が発売されたので読んだ 棒グラフ、折れ線グラフ、インタラクション(マウスオーバーで丸が大きくなるとかラベル表示とか、横のリストからグラ …

Todolistをmarionette化

By: Jackie – CC BY 2.0 目次1 Marionette.js2 インストール3 Application4 gulpfile.coffee5 ItemView6 Coll …

backbone-relationalで関連するコレクションをRails3.2のAPIに投稿〜accepts_nested_attributes_for

By: Mike Baird – CC BY 2.0   backbonerelational.org/ Backbone-relationalを使って関連するコレクションをまと …