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

執筆者:

関連記事

no image

Rails3.2でOpenDocumentText(.odt)を作成~serenity

  これも途中経過デス   odtはOpenOffice.orgのwriterなんかの保存形式 serenityはerbライクなodtテンプレートから変数を利用して文書を作成してく …

Rails3.2でユーザー管理機能を追加~Devise

  前回 Rails3.2のアプリにユーザー機能を追加する~Devise サインアップ機能を削除したので、Railsからのユーザー管理機能を追加した 目次1 generate2 routes …

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

Backbone.js楽しくなってきた 部品ごとのクラスをつくって、それに飾りとイベントをつけて、あとは上位部品から呼び出してくっつけるだけ jQuery UIのダイアログの場合は、公式のサンプルだと …

Rails4でフォーム要素を動的に追加したり削除したり〜nested_form

目次1 参考2 前提の環境3 Gemfile4 View5 Controller6 できた7 パーシャル化8 フォームを追加する場所を指定する9 一対一の場合10 そのほか11 番外編: 1つのモデル …

Railsでjavascriptやcoffeescriptをつかうとき便利かもしれないGem

By: Stan Dalone & Miran Rijavec – CC BY 2.0 目次1 oj2 gon3 js-routes4 rails-dev-tweaks oj gi …