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

  • 1,479 views
Uploaded 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 的 區塊更新與無限捲軸功能

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,479
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
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