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

執筆者:

関連記事

Rails3.2でdocxを作成

目次1 途中経過2 次にrubyのスクリプトから同じことをしてみる3 Railsから試してみる4 うまくいきました 途中経過 github.com/jawspeak/ruby-docx-templat

no image

kaminari + Twitter Bootstrap2テーマでFirst,Prev,Next,Lastだけおかしい場合

前につくったTwitter Bootstrap2用のkaminariテーマをコピーして使おうとしたら表題の通り、First,Prev,Next,Lastがおかしい あと…も表示されない G …

Backbone-formsをさわってみた

github.com/powmedia/backbone-forms backbone-formsの特徴 簡単なスキーマでフォームを生成 バリデーション ネストしたフォーム 使えるそしてカスタマイズ可 …

Backbone.jsのためにRails3.2でJSON APIをつくる~RABL

Rails4.1で全文検索〜rroonga

By: Vinoth Chandar – CC BY 2.0 目次1 RailsでGroongaを使う選択肢2 サンプルのアプリ3 Gemfile4 データベースへの接続5 スキーマの設定 …