新手问题 加载更多的功能如何实现?

yeyong14 · 2014年06月10日 · 最后由 yeyong14 回复于 2014年06月10日 · 2211 次阅读

看了 railscasts 的一个视频 Endless Page,想自己实现一个。可是怎么也跑不起来。

#controller
  def index 
   @products = Product.paginate(page: params[:page],per_page: 15)
  end
#view /index.js.rjs
 page.insert_html :bottom, :products, :partial => 'products'
if @products.total_pages > @products.current_page
  page.call 'checkScroll'
else
  page[:loading].hide
end

#assets/javascript/endless_page.js
var currentPage = 1;
function checkScroll() {
  if (nearBottomOfPage()) {
    currentPage++;
    new Ajax.Request('/products.js?page=' + currentPage, {asynchronous:true, evalScripts:true, method:'get'});
  } else {
    setTimeout("checkScroll()", 250);
  }
}

function nearBottomOfPage() {
  return scrollDistanceFromBottom() < 150;
}

function scrollDistanceFromBottom(argument) {
  return pageHeight() - (window.pageYOffset + self.innerHeight);
}

function pageHeight() {
  return Math.max(document.body.scrollHeight, document.body.offsetHeight);
}

document.observe('dom:loaded', checkScroll);
这里还出现了js错误
##Uncaught TypeError: undefined is not a function 

关于这个加载更多的应该如何实现的吗?

硬 copy 教程要看一下时间啊,这个是 2008 年的,你还敢直接用。并且 RJS 早就过时了: http://weblog.rubyonrails.org/2011/4/21/jquery-new-default/

你要在传统 Rails 里面实现这个,原理是这样:

  1. JS 部分基本原理没有问题。
  2. JS 的 Ajax 可以用 jQuery 实现,请求到 index action
  3. index action 回应 js 请求到 index.js.erb,并根据 page 组织一个@products
  4. js view 里面回复带@products的新增部分 html
  5. 前端 Ajax 成功后把新增 html 加到老的后面

这个功能虽然可以实现,但我认为基本就是玩玩,因为前后端依赖太多,要有需求变动很麻烦。最好还是用传统 pagination。如果以后要追求 js 的酷效果还是得靠 json

@billy 谢谢点拨,经你这么一点,顿时明白了

需要 登录 后方可回复, 如果你还没有账号请 注册新账号