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

執筆者:

関連記事

市場テクニカル分析ライブラリta-libとruby用のラッパーruby-talibをインストールする

By: Ponzi_Unit – CC BY 2.0 目次1 ta-lib2 talib_ruby ta-lib ta-libは市場のテクニカル分析用のライブラリ集. macであればHom …

Backbone.Marionette+NedbでElectron♪

By: Jairo – CC BY 2.0 目次1 はじめに2 環境3 yarnのインストール4 electronのインストール5 開発環境の概要6 webpackでライブラリの同梱7 g …

Rails3で帳票印刷を試す~thinreports

By: ZZ Bottom – CC BY 2.0 目次1 Thinreports2 とりあえずサンプルを試してみた3 ソースを見てみる1~詳細画面4 ソースを見てみる2~一覧表 Thin …

SimpleCovのカバレッジをvimに表示させる~simplecov-vim

      github.com/nyarly/Simplecov-Vim 参照 Rails3でテストカバレッジを計測する~simplecov,thin 自分のgem上の …

no image

Rails3.2からBackbone.jsとD3.jsを使う一例

目次1 Backbone.jsからD3.jsを使う2 RailsのネストしたURLでBackboneを使う Backbone.jsからD3.jsを使う d3.jsで力指向グラフを使って遊ぶ2のクラス構 …