Question

我正在尝试无限滚动到我的项目中。我已经做了一切，就像在这个方法中一样：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

show.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"

Partial _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。

Answer 1

商店脚本错误 - show.js.haml

我已将@products更改为我的部分名称：



     $("#products_list").append("#{escape_javascript(render('products_list'))}");

无限滚动轨道与haml

1 个答案: