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.0でもajaxなデータテーブルを使う~ajax-datatables

Railsでajaxなテーブルを使う~datatables Rails4でのJSONテンプレート~jbuilder+rabl+ruby 目次1 index.json.jbuilder2 tasks.j …

no image

RailsでRedisを使う例のメモ

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

Backbone.jsのためにRails3.2でJSON APIをつくる~RABL

Railsでhtmlファイルやリンク先のスクリーンショットを撮影~IMGKit&wkhtmltoimage

  github.com/csquared/IMGKit 目次1 環境2 wkhtmltoimageのインストール3 imgkitのインストール4 試す5 日本語フォント 環境 ubuntu …

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

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