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.8でPostgreSQLを使う(開発環境)〜pg gem

環境 Ubuntu server12.04にPostgreSQLをインストールする 参考 #342 Migrating to PostgreSQL @railscasts 目次1 準備2 データベース …

RailsでECサイト構築6 固定ページを作る~spree

  ECサイトを作成するときには日本の法律にしたがって色々と表示しなければならない 表示しなければならないことについては次のページが詳しかった 本サイトについて 実際のECサイトをみれば実例 …

SASS/SCSS+COMPASS+zurui-sass-railsで角丸・グラデ・半透明・テキストシャドウ・ボックスシャドウ

By: Ole Houen – CC BY 2.0 sass-lang.com/ Sassの基礎 (全15回) ドットインストール ネストを覚えた人のためのSassの便利な使い方 comp …

no image

RailsでGoogle Mapを使ってみる~Google-Maps-for-Rails

github.com/apneadiving/Google-Maps-for-Rails   前提

こんな感じで perso …

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

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