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

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

on

  • 2,136 views

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 的 區塊更新與無限捲軸功能

Statistics

Views

Total Views
2,136
Views on SlideShare
2,103
Embed Views
33

Actions

Likes
4
Downloads
16
Comments
0

3 Embeds 33

http://eventifier.co 28
https://twitter.com 4
http://tweetedtimes.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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