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

執筆者:

関連記事

no image

RubyでDocxを分解してみた~Nokogiri::XML::SAX

    参照 Rubyでdocxをいろいろ分析してみた 今度はsaxのアプローチでdocxのword/document.xmlを分解してみた 使い方は、Nokogiri::XML: …

no image

Railsで動画を管理する2 動画のサムネイルを作成する~CarrierWave + Flowplayer

  *とりあえず動いているけど、もっとましな方法があるとおもいます 前提 Railsで動画ファイルを管理する~CarrierWave Flowplayer 参考 Rubyでffmpegのラッ …

Rails3でajaxでD&Dでまとめてファイルアップロード~jQueryFileUpload for Rails

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

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

FullCalendarのagendaViewでselectの場所がずれる問題

  By: Ben Piddington 前回 Rails3.2でGoogle Calendarライクなカレンダーを使う〜fullcalendar-rails   gemは最新の1 …