如何使⽤用分⾴頁 gem 和 partial          輕鬆完成 ajax 的        區塊更新與無限捲軸功能                ⼩小蟹12年12月8⽇日星期六                    1
About Me               • ⼩小蟹 (a.k.a Jerry Lee)               • Rails Developer @ womany.net               • Assistant orga...
Endless page               • Facebook               • Pinterest               • Twitter12年12月8⽇日星期六                       ...
Requirement               • Pagination               • Ajax loading new page               • JS detects scroll position12年...
Pagination               • Gemfile                 gem ‘kaminari’               • controller action                 @posts ...
Ajax loading               • action_view.html.erb                 <%= paginate @posts, :remote => true %>               • ...
Detect scroll               • checkout posts.js                 Ref: http://railscasts.com/episodes/114-                 e...
Source Code & Demo               • https://github.com/wildjcrt/endless-page-                 example               • http:...
Thank you!12年12月8⽇日星期六                9
Upcoming SlideShare
Loading in...5
×

如何使⽤用分⾴頁 gem 和 partial 輕鬆完成 ajax 的 區塊更新與無限捲軸功能

1,631

Published on

In Rails application, how to use paginate gem and view partial to easily make an endless page.
如何使⽤用分⾴頁 gem 和 partial 輕鬆完成 ajax 的 區塊更新與無限捲軸功能

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,631
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
18
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

如何使⽤用分⾴頁 gem 和 partial 輕鬆完成 ajax 的 區塊更新與無限捲軸功能

  1. 1. 如何使⽤用分⾴頁 gem 和 partial 輕鬆完成 ajax 的 區塊更新與無限捲軸功能 ⼩小蟹12年12月8⽇日星期六 1
  2. 2. About Me • ⼩小蟹 (a.k.a Jerry Lee) • Rails Developer @ womany.net • Assistant organizer of Taipei Rails Meetup • Twitter & Github: wildjcrt • Blog: http://wildjcrt.pixnet.net12年12月8⽇日星期六 2
  3. 3. Endless page • Facebook • Pinterest • Twitter12年12月8⽇日星期六 3
  4. 4. Requirement • Pagination • Ajax loading new page • JS detects scroll position12年12月8⽇日星期六 4
  5. 5. Pagination • Gemfile gem ‘kaminari’ • controller action @posts = Post.page(params[:page]).per(1) • action_view.html.erb <%= render @posts %> <%= paginate @posts %>12年12月8⽇日星期六 5
  6. 6. Ajax loading • action_view.html.erb <%= paginate @posts, :remote => true %> • action_view.js.erb $(“selector”) .replaceWith($(“<%= j(render @posts) %>”)); $(".paginate").html(...)12年12月8⽇日星期六 6
  7. 7. Detect scroll • checkout posts.js Ref: http://railscasts.com/episodes/114- endless-page • action_view.js.erb checkScroll();12年12月8⽇日星期六 7
  8. 8. Source Code & Demo • https://github.com/wildjcrt/endless-page- example • http://endless-page- example.herokuapp.com/12年12月8⽇日星期六 8
  9. 9. Thank you!12年12月8⽇日星期六 9
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×