我正在尝试在我的项目中实现无限滚动。我已经按照这个方法做了所有事情:https ://github.com/amatsuda/kaminari/wiki/How-To:-Create-Infinite-Scrolling-with-jQuery 但这对我不起作用:(
控制器:
def show
category = Category.find(params[:id])
products = category.products.page(params[:page])
@category = CategoryDecorator.decorate(category)
@products = ProductDecorator.decorate_collection(products)
respond_to do |format|
format.js
format.html
format.xml { render :xml => @products }
end
end
显示.html.haml:
#products_list
%page
= render 'products_list'
:javascript
$(function() {
var page = 1,
loading = false;
function nearBottomOfPage() {
return $(window).scrollTop() > $(document).height() - $(window).height() - 200;
}
$(window).scroll(function(){
if (loading) {
return;
}
if(nearBottomOfPage()) {
loading=true;
page++;
$.ajax({
url: '/universes/nautique/sports/surfwear/categories/boarshorts?per_page=' + page,
type: 'get',
dataType: 'script',
success: function() {
$(window).sausage('draw');
loading=false;
}
});
}
});
$(window).sausage();
}());
- content_for :javascript do
= javascript_include_tag "jquery.sausage"
部分_products_list.html.haml:
- @products.each_with_index do |product,index|
.block-prodlist{ data: { index: product.id } }
.inner.onfocus
.selection
%label AJOUTER À MA SÉLECTION
%input.chk{:name => "", :type => "checkbox", :value => ""}/
.thumbproduit
= index
%img{:alt => "Produit", :height => "194", :src => "/assets/editorial/produit1.jpg", :width => "194"}/
.prixcaption -20%
.context
%h3
= product.brand_name
和 show.js.haml:
$("#products_list").append("#{escape_javascript(render(@products))}");
我的萤火虫中没有看到 show.js。