Your SlideShare is downloading. ×
如何使⽤用分⾴頁 gem 和 partial 輕鬆完成 ajax 的 區塊更新與無限捲軸功能
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

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

1,529
views

Published on

In Rails application, how to use paginate gem and view partial to easily make an endless page. …

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,529
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
16
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 如何使⽤用分⾴頁 gem 和 partial 輕鬆完成 ajax 的 區塊更新與無限捲軸功能 ⼩小蟹12年12月8⽇日星期六 1
  • 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. Endless page • Facebook • Pinterest • Twitter12年12月8⽇日星期六 3
  • 4. Requirement • Pagination • Ajax loading new page • JS detects scroll position12年12月8⽇日星期六 4
  • 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. 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. Detect scroll • checkout posts.js Ref: http://railscasts.com/episodes/114- endless-page • action_view.js.erb checkScroll();12年12月8⽇日星期六 7
  • 8. Source Code & Demo • https://github.com/wildjcrt/endless-page- example • http://endless-page- example.herokuapp.com/12年12月8⽇日星期六 8
  • 9. Thank you!12年12月8⽇日星期六 9