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

執筆者:

関連記事

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

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

ゾンビView問題~Backbone-supportでSwapping RouterとCompositeViewを使う

By: Charlie – CC BY 2.0 目次1 ゾンビView問題2 使う準備は簡単3 Composite View4 Swapping Router5 いろいろ6 Backbon …

no image

RubyとRailsのテスト関係のリンクメモ

  目次1 RSpec2 Factory Girl3 Capybara RSpec rspec.info/ Expectations とMatcher rubydoc.info/gems/r

Rails4でつかえるインラインエディタを試してみた〜X-editable-rails

目次1 x-editable2 bootstrapを導入3 x-editable-rails4 サンプルアプリ x-editable 文字をダブルクリックして編集できるやつ x-editable vi …

no image

Rubyからdocxを生成する

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