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

TwitterBootstrapRailsでエラーが出る件

    undefined method `less’・・・的なエラーが出た. とりあえず下のgemを足したら動いた.そのうち修正されるとおもう. [crayon-59 …

no image

Private_pub(Faye)の管理にForemanを使う~Foreman & Upstart

foremanはFayeサーバーのようにRailsのサーバーとは別プロセスで動くサーバー類をまとめて管理するgemだ 参考 railscasts.com/episodes/281-foreman?la

Rails3.2でajaxなフォルダツリーを導入する2~dynatree-rails

  目次1 jQuery ajax送信側2 app/views/folders/show.js.coffee3  で、コントローラーを設定4 今までのは置いといてJsonでやり取りするアプロ …

no image

Railsで使える便利なナビゲーション~simple-navigation

気になるBackbone.jsのプラグインとTips

  By: Francisco Gonzalez 随時更新中 目次1 気になるBackbone.jsのプラグイン2 チュートリアル3 Tips4 気になるjQueryのプラグイン 気になるB …