Question

我正在构建一个简单的Rails application来管理我在Twitter上的收藏列表。我构建了一些简单的rake任务，将我喜欢的所有推文和我将来最喜欢的任何新推送到数据库中。

我已经设法通过Endless Page上的RailsCast在我的索引视图上实现无限滚动。我还跟着RailsCast #228创建了几个可排序的导航链接，以最新（最新鲜），最旧（最成熟），最受欢迎（最甜蜜），最转推（最多汁）和随机（非最不发达）来显示索引视图。

现在我试图让这些导航链接使用AJAX工作，但我无法通过无限滚动使其正常运行。如果您在不滚动的情况下单击它们，链接将按预期工作。但是如果你滚动一点点，点击另一个导航链接将命中数据库两次，加载前25个收藏夹按你的预期排序，另外25个加起来对应于上一个排序视图的下一页。

例如，当我导航到最新鲜，最成熟，滚动一点点，最甜蜜，最后变成多汁时，这就是我的Rails服务器在本地显示的内容。请注意，当我加载最甜的时候，它还加载了最成熟的第2页：

Started GET "/?col=date_tweeted&dir=DESC&_=1397073954001" for 127.0.0.1 at 2014-04-09 16:06:01 -0400
Processing by FavoritesController#index as JS
  Parameters: {"col"=>"date_tweeted", "dir"=>"DESC", "_"=>"1397073954001"}
  Favorite Load (1.7ms)  SELECT "favorites".* FROM "favorites" ORDER BY date_tweeted DESC LIMIT 25 OFFSET 0
   (1.1ms)  SELECT COUNT(*) FROM "favorites"
  Rendered favorites/_favorite.html.erb (23.3ms)
  Rendered favorites/index.js.erb (40.4ms)
Completed 200 OK in 45ms (Views: 41.6ms | ActiveRecord: 2.8ms)


Started GET "/?col=date_tweeted&dir=ASC&_=1397073954002" for 127.0.0.1 at 2014-04-09 16:06:08 -0400
Processing by FavoritesController#index as JS
  Parameters: {"col"=>"date_tweeted", "dir"=>"ASC", "_"=>"1397073954002"}
  Favorite Load (1.9ms)  SELECT "favorites".* FROM "favorites" ORDER BY date_tweeted ASC LIMIT 25 OFFSET 0
   (1.2ms)  SELECT COUNT(*) FROM "favorites"
  Rendered favorites/_favorite.html.erb (71.4ms)
  Rendered favorites/index.js.erb (92.3ms)
Completed 200 OK in 97ms (Views: 93.2ms | ActiveRecord: 3.1ms)


Started GET "/?col=favorite_count&dir=DESC&_=1397073954003" for 127.0.0.1 at 2014-04-09 16:06:14 -0400
Processing by FavoritesController#index as JS
  Parameters: {"col"=>"favorite_count", "dir"=>"DESC", "_"=>"1397073954003"}
  Favorite Load (5.5ms)  SELECT "favorites".* FROM "favorites" ORDER BY favorite_count DESC LIMIT 25 OFFSET 0
   (0.8ms)  SELECT COUNT(*) FROM "favorites"
  Rendered favorites/_favorite.html.erb (72.2ms)
  Rendered favorites/index.js.erb (90.1ms)
Completed 200 OK in 97ms (Views: 89.9ms | ActiveRecord: 6.3ms)


Started GET "/?_=1397073954004&col=date_tweeted&dir=ASC&page=2" for 127.0.0.1 at 2014-04-09 16:06:14 -0400
Processing by FavoritesController#index as JS
  Parameters: {"_"=>"1397073954004", "col"=>"date_tweeted", "dir"=>"ASC", "page"=>"2"}
  Favorite Load (5.0ms)  SELECT "favorites".* FROM "favorites" ORDER BY date_tweeted ASC LIMIT 25 OFFSET 25
   (0.6ms)  SELECT COUNT(*) FROM "favorites"
  Rendered favorites/_favorite.html.erb (28.1ms)
  Rendered favorites/index.js.erb (44.2ms)
Completed 200 OK in 50ms (Views: 43.3ms | ActiveRecord: 5.6ms)


Started GET "/?col=retweet_count&dir=DESC&_=1397073954005" for 127.0.0.1 at 2014-04-09 16:06:19 -0400
Processing by FavoritesController#index as JS
  Parameters: {"col"=>"retweet_count", "dir"=>"DESC", "_"=>"1397073954005"}
  Favorite Load (3.0ms)  SELECT "favorites".* FROM "favorites" ORDER BY retweet_count DESC LIMIT 25 OFFSET 0
   (1.1ms)  SELECT COUNT(*) FROM "favorites"
  Rendered favorites/_favorite.html.erb (73.7ms)
  Rendered favorites/index.js.erb (91.6ms)
Completed 200 OK in 96ms (Views: 91.4ms | ActiveRecord: 4.1ms)

在切换索引视图的不同方法之间切换时，我无法理解如何消除页面参数（我将其设置为nil吗？何时？在哪里？）。代码为here，没有AJAX排序的应用程序演示为here。为方便起见，下面是最相关代码的副本。谢谢你的帮助。

//favorites.js.coffee
endlessScroll = ->
  if ('.pagination').length
    $(window).scroll ->
      url = $('.pagination .next_page').attr('href')
      if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
        $('.pagination').text('Plucking more favorites...')
        $.getScript(url)
    $(window).scroll()

jQuery ->
  endlessScroll()

//application.js
$(function() {
  var sortOptions = 'ul.left > li > a';
  $(sortOptions).on('click', function() {
    $(sortOptions).css({ background: '#333333' });
    $(this).css({ background: '#f04124' });
    $('#all-favorites').empty();
    // remove page params ???
    // or remove .pagination for now ???
    $.getScript(this.href);
    return false;
  });
});

//index.html.erb
<div class='row' id='all-favorites'>
  <%= render @favorites %>
</div>

<%= will_paginate @favorites %>

//index.js.erb
$('#all-favorites').append('<%= j render(@favorites) %>');
<% if @favorites.next_page %>
  $('.pagination').replaceWith('<%= j will_paginate(@favorites) %>');
<% else %>
  $('.pagination').remove();
<% end %>

//_topbar.html.erb snippet
 <ul class='left'>
    <li><%= sortable 'freshest', 'date_tweeted' %></li>
    <li><%= sortable 'ripest', 'date_tweeted', 'ASC' %></li>
    <li><%= sortable 'sweetest', 'favorite_count' %></li>
    <li><%= sortable 'juiciest', 'retweet_count' %></li>
    <li><%= shufflable 'unpickiest'%></li>
  </ul>

//application_helper.rb
module ApplicationHelper
  def sortable(link_name, column, direction = 'DESC')
    link_to link_name, col: column, dir: direction
  end

  def shufflable(link_name)
    link_to link_name, mix: true
  end
end

//favorites_controller.rb
class FavoritesController < ApplicationController
  def index
    @favorites = Favorite.order(sort).page(params[:page])
  end

  def show
    @favorite = Favorite.find(params[:id])
  end

  private

  def sort
    shuffle? ? 'RANDOM()' : "#{sort_column} #{sort_direction}"
  end

  def sort_column
    sortable_columns = %w(date_tweeted favorite_count retweet_count)
    sortable_columns.include?(params[:col]) ? params[:col] : 'date_tweeted'
  end

  def sort_direction
    %w(ASC DESC).include?(params[:dir]) ? params[:dir] : 'DESC'
  end

  def shuffle?
    params[:mix] == 'true'
  end
end

解决Rails中的AJAX行为问题

0 个答案: