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

執筆者:

関連記事

Rubyでdocxをいろいろ分析してみた

  目次1 解凍~minizip2 ファイルを開く~File.open3 全ファイルを解凍せずにzip内の必要なファイルだけを開く~zipruby4 置換~gsub5 xmlの操作~noko …

Backbone.js0.9.10以降のクライアントサイドでのvalidate

backbone-railsのscaffoldで生成されるコードでルーティングとCRUDの処理をどうやってるのか読んでみた

By: asobi tsuchiya   目次1 はじめに2 サンプルの準備3 初期化4 ルーター5 READ6 CREATE7 UPDATE8 DELETE はじめに backbone-r …

no image

RubyからHyper Estraierを使う1~search_do

環境:Ruby 1.9.3 & Rails 3.2.7 参考リンク github.com/grosser/search_do Getting started with acts_as_sear …

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

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