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

執筆者:

関連記事

Rails3.2+jQueryUI1.10でjQuery-UI-Bootstrapのデモ画面を出すところまでやった

なにかいつの間にかかっこいい感じのサイトになってた addyosmani.github.com/jquery-ui-bootstrap/ jquery-ui-bootstrap.github.io/j …

Railsでajaxなテーブルを使う~datatables

    github.com/rweng/jquery-datatables-rails 目次1 Gemfile2 application.js3 application.css4 …

RailsでECサイトを構築3 日本にあわせる~spree

  前提 RailsでECサイト構築~spree RailsでECサイト構築2 注文してみる~spree 目次1 テンプレートをダウンロード2 テンプレートを改造する3 デフォルトの国を変更 …

no image

Ubuntu ServerのGuardからネットワーク経由でWindowsのブラウザをリロードする~guard-livereload

Ubuntu12.04.1でCoffeeScriptの自動makeとブラウザの自動リロード~guard-coffeescript   Ubuntu ServerのGuardからGrowl f …

Hallo.jsのMarkdownをWYSIWYGで編集できるサンプルがぐう便利だったのでRails3.2とBackbone.jsでやってみた

hallojs.org/demo/markdown/ これ  とにかく一度さわってみて欲しいんですけど 目次1 サンプルの便利ポイント2 Rails3.2とBackboneで動かしてみる サンプルの便 …