Backbone.js Railsで使えるGem

Rails3.2とBackbone.jsでサーバーサイドのフィルタリング

投稿日:

 

テーブルに表示されているデータをサーチバーに入力した語で絞り込みたい

こういうテーブルフィルタリングを実現する仕組みとしては、サーバーサイドでは検索語に従って絞り込んだJSONを発行すること、クライアントサイドでは検索語の送信の仕組みとリロードしたときに同じページがあらわれるようにする仕組みが必要

サーバーサイドの準備

サーバーサイドではこんな感じ

articles?search=helloとかにアクセスすればフィルタリングできているのがわかる

クライアントサイドの準備

Backbone-supportのCompositeViewを使ってTableを表示する

SwappingRouterとCompositeViewについては下の記事を参照

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

router

Layout

おおもとのView

Layoutのテンプレート

searchbar

サーチバーを表示するView

searchbarのテンプレート

table

テーブルを表示するView

tr

trを表示するView

trのテンプレート

BackboneのViewは自分自身がdiv要素を作って、その中にテンプレートを書き出すので冗長になりがちだけど、一番上のViewはtemplateを作った

最上位のdivをまとめたレイアウトを作っておくとあとでCSSでレイアウトするときに楽そうだったから

フィルタリングの実装

今回はURLを起点に絞込みをする

つまりRouterでアドレスから検索語を読み取って、それに応じたJSONをサーバーから取得して描画する

同じアドレスを入力すれば同じ描画が保証されるところがメリット

RailsのparamsをBackbone.collectionから送るには

これでOK

(@paramsはObject)

stackoverflow.com/questions/6659283/backbone-js-fetch-with-parameters

試しにつぎのようにすればテーブルが絞り込まれる

ルーティング

テーブルには絞込みの他に並べ替えやページングもあるので、ちょっと汎用性がありそうな感じにしたい

単純に下のようなアドレスがマッチするだけじゃなくて

いろいろな場合に対応できるようにしたい

そこでオプションを取得した後、パースすることにした

optionsのデフォルトを”にしておかないとアドレスにオプションがないときsplitでエラーが出る

サーチバーから検索語を取得する

あとは、検索語が入力されたらRouterのイベントを呼び出して検索語を渡せばOK

まずサーチバーの方でなにか入力してからエンターキーを押すとイベント”openPage”を発行するようにして

ルーターの方でイベントを取得したらそのページに遷移するようにした

createOptionがごちゃごちゃしてるのはページネーションをやろうと思ったけど挫折したからw

これで絞り込んだ後にページ遷移する

サーチバーに検索した語をいれる

ここまでで完成でいいんだけど、ページ遷移するからなのか入力した語がサーチバーから消えてしまう

しょうがないので、サーチバーまで検索語を渡して表示させる

router

layout

searchbar

searchbarのテンプレート

 

日本語を検索する場合のエンコード・デコード

今まで日本語を検索しなかったので気づかなかったけど、日本語で検索すると、たまに「%E7%90%B4%E6%B5%A6%E3%81%95%E3%82%93」みたいになってしまうことがある

urlを介して検索語を使っているので明示的にデコード・エンコードしておいたほうがいい

 

うん

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

執筆者:

関連記事

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

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

no image

Rubyからdocxを生成する

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

backbone-relationalをJasmineでテストしてみた

no image

Private_pub(Faye)の管理にForemanを使う~Foreman & Upstart

foremanはFayeサーバーのようにRailsのサーバーとは別プロセスで動くサーバー類をまとめて管理するgemだ 参考 railscasts.com/episodes/281-foreman?la

状況に応じてRailsのフォームの種類を変える

  前提 railsでdocxを生成する動画 docxを生成するアプリは変数を自動で読み込むけど、状況に応じてフォームの種類を変えたい. Railsでは変数に応じてフォームの種類を用意してい …