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

執筆者:

関連記事

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

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

Rails4.2でselectを絞込できるselect2を使ってみた〜select2

By: Metropolitan Transportation Authority of the State of New York – CC BY 2.0 目次1 select22 Ge …

気になるBackbone.jsのプラグインとTips

  By: Francisco Gonzalez 随時更新中 目次1 気になるBackbone.jsのプラグイン2 チュートリアル3 Tips4 気になるjQueryのプラグイン 気になるB …

Hallo.jsのMarkdownをWYSIWYGで編集できるサンプルがぐう便利だったのでRails3.2とBackbone.jsでやってみた

hallojs.org/demo/markdown/ これ  とにかく一度さわってみて欲しいんですけど 目次1 サンプルの便利ポイント2 Rails3.2とBackboneで動かしてみる サンプルの便 …

no image

Rubyからdocxを生成する

    前提 Rubyでdocxをいろいろ分析してみた 変数の仕様~正規表現 いろいろなパターンで試してみた 例えば、こんな文 [crayon-5ada69b43aff983570 …