javascript - 用于在 Rails 中无限滚动的 jScroll

Question

我是 Rails 和 javascript 的新手。我在 ruby​​ on rails 中开发了一个小应用程序，它使用 solr 的 sunspot 在数据库中搜索产品。我曾经使用 kaminari 的分页来显示内容。但现在我想取消它并改用无限滚动。我指的是下面的无限滚动条。 https://github.com/pklauzinski/jscroll 我想将其集成到我的 Rails 应用程序中。我该怎么做？ 这是我的 Controller 代码:

             def show

                    if params[:name].nil?
                     @search = []
                    else
                     @search = Sunspot.search(Clothes) do
                     fulltext params[:name]
                     paginate :page => params[:page], :per_page => 24
                     order_by :maxprice
                    end


                  @results = @search.results
                  end
                flash[:alert] = "Enter something!"
                end

              def autocomplete
                 list=[] 
                 @res = Clothes.search do
                 fulltext params[:term]
                 paginate :page => 1, :per_page => 100
                 order_by :maxprice
                 end
               @rest = @res.results
               @rest.each do |brand|
               list << {"label"=>brand.name, "value"=>brand.name, "id"=>brand.id}
                end
               respond_to do |format|
               format.json{render :json=>list.to_json, :layout=>false}
                end
              end
             end

这是我的 View 代码:

             <div id="container">

          <% for prod in @results %>
          <div class="product">
             <div class="image"><%= image_tag(prod.image, :alt => "logo", :size => "75x75") %> </div>
                <div class="name"><h3> <%= prod.name %> </h3></div>
                <div class="price"><h5>Old Price:</h5><%= prod.maxprice%></div><div class="price"> <h5>New Price:</h5><%= (prod.maxprice)-(prod.maxprice * prod.discount / 100) %></div>    
           </div>
           <% end %>
             <% else %>
               <div class="notice"><%= flash[:alert] %></div>

                 <% end %>
            </div>

还有我的自动完成和处理我的 ajax 的脚本代码。

                        <script>
                     $(document).ready(function() {
                    $.ajax({
                   url : "shirts/first",
                   type : "GET"
                    });
                 $("#name").autocomplete({
                 source : "shirts/autocomplete",
                 autoFocus : false,
                 minLength : 1,
                 select : function(event, ui) {
                 document.getElementById("name").value = ui.item.value;
            $.ajax({
            url : "shirts/show?name=" + ui.item.value,
            type : "GET"
            });
             }
               });
                     }); 
                     </script>

Answer 1

嘿，伙计，你可以试试这个 http://railscasts.com/episodes/114-endless-page