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

執筆者:

関連記事

Rails4とBootstrapをつかった動的なナビゲーションとパンくずリスト〜acts_as_nested_set

By: anko.gaku_ula – CC BY 2.0 目次1 Railscast2 acts_as_nested_set3 ヘッダーnav4 サイドメニュー5 パンくずリスト6 でき …

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

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

no image

RailsでRedisを使う例のメモ

最近よく見かけるようなのでメモ Redisって大量にメモリを積んでないとダメかと思ってたけど、思ったよりいろんな方面に用途がありそう(リンク先の情報はわたしは未検証です) Redisの基礎 (全14回 …

Rails3.2とBackbone.jsでサーバーサイドのソーティング

By: Haldane Martin – CC BY 2.0   Rails3.2とBackbone.jsでサーバーサイドのフィルタリング 次はソートを実装したい 目次1 サーバ …

連続的な位置情報の取得とHerokuへのアップ~HTML5 Geolocation API

  目次1 連続的な位置情報の取得2 heroku3 結果 連続的な位置情報の取得 連続的な位置情報の取得はこんなかんじで書いてみた [crayon-599da0dbc51729653466 …