Backbone.js Railsで使えるGem

Rails3.2とBackbone.jsでサーバーサイドのページネーション

投稿日:

 

前提

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

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

つぎはページネーションを実装する

 

サーバーサイド

articles#index

kaminariを使ってる

articles#max_page

また、ページネーションを実現するには最低でも最大ページ数が必要なので準備した

やり方はいろいろあると思う

indexのjsonにmax_pageを混ぜてもいいし

articlesコレクションを含む上位モデルを作ってもいいと思う

でも、parseしたり面倒くさいので今回は別通信で

articlesコントローラーに

config/routes.rb

resources :articlesの前におく必要がある

articles/max_page.jsonにアクセスして最大ページ数が取れるか確認する

テンプレートを準備する

TwitterBootstrapを使っている

layout

layoutのテンプレートに追加

Twitterbootstrapでは一番上のDivにclass=”pagination”をつける

paging

pagingのテンプレート

テンプレートまで変数をわたす

ページングに必要なのは最大ページ数と現在ページ数なのでこれをpagingまで渡す

Page

まずRailsからmax_pageを取ってくるModelをつくる

layout

layoutあたりで準備して

fetchで取得してから描画

paging

取得した変数を整形して

テンプレートに渡す

pagingのテンプレート

これはシンプルに1から最終ページまでを描画したもの

ページ数が多くなると「・・・」をいれるとか色々なパターンがある

あと、ページ数が極端に少ない場合はどうするかとか

disabled、activeのクラス付け

クラス付はテンプレートに書いてもよかったけど、汚くなりそうだったので

  • ページが1ページ目なら最初のページと前へのページはdisableに
  • ページが最終ページなら最後のページと次へのページはdisableに
  • 現在のページはactiveに

 

layout

メソッドは上位のインスタンスから実行

 

 

イベントの設定

paging

 

残りのイベントの設定

お分かりだろうか

明らかに飽きてます

 

バグ発生

このままだと、フィルタリングしても最大数が変わらない

articles#max_page

layout

searchbar

このままだと例えばページ9くらいにいて、絞込みをしたとき、その結果がページ9まで存在しない場合、何も表示されない(まだ9ページ目にいるから)

考え方だけど、絞り込んだときは1ページ目を表示するようにした

 

 

 

完成 ヽ(=´▽`=)ノ

これでBackboneでもRailsと通信してFilter、Sort、Paginationができるようになったよ

 

 

*jQuery UI Bootstrap がjqGridサポート

などと喜んでいるうちにjQuery UI BootstrapでjqGridをサポートするコミットがはいった

だが、見た目的に好みでないので結果OK

github.com/addyosmani/jquery-ui-bootstrap/commit/695d0b4c8458acf84f87aee9ab031fa35ba32629

addyosmani.github.com/jquery-ui-bootstrap/extra.html#jqgrid

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

執筆者:

関連記事

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

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

TwitterBootstrapでアイコンが微妙な感じだったらFontAwesomeを試してみるといい

かもしれない fortawesome.github.com/Font-Awesome/ hallojsで使ってるのは上 github.com/bokmann/font-awesome-rails gi …

Rails3.2でHTML5で取得した位置情報をMongoDBに保存してGoogleMapsでみる~mongoid、gmaps4rails

前提 Rails3.2でhtml5で取得した位置情報をAjaxで住所表示する~geocoder 目次1 Mongoid2 スケルトンを作る3 Gmap4railsのインストール4 とりあえず地図を表示 …

Backbone.jsで関連するモデルのREADとCREATE

By: woodleywonderworks – CC BY 2.0   ThoughtBotの本を読み進めてるけど私には買ってよかったと感じている ゾンビviewのワナを回避す …

RubyでWebを操作できるMechanizeの利用例を集めてみた

By: nubobo – CC BY 2.0 目次1 公式2 使い方など3 リンク 公式 mechanize.rubyforge.org/ 使い方など Mechanize について 楽々ス …