改变Kaminari url为paginator

Question

我有一个应用程序，其页面的项目在顶部有一些排序选项。这些项目使用的是desandro的InfiniteScroll插件。

当页面加载infiniteScroll工作正常。它从分页器的下一个链接抓取URL并且效果很好：

$('.car-grid').infiniteScroll({
  path: '.paginator--cars .next_page a',
  append: '.car',
  scrollThreshold: 0
});

但是，当我单击顶部的一个排序选项时，问题就出现了。单击sort选项被我的脚本拦截，它首先销毁infinitescroll实例，然后进行ajax调用并返回一个包含两个项目的json文件。一个是新车的html块，第二个是更新的分页器的html。

然后将其输入Handlebars.js，并使用模板更新页面。然后，我重新初始化新的汽车。

问题是因为paginator是由.json URL上的请求生成的，所以.json被添加到paginator中的所有链接。这会导致infiniteScroll返回错误的结果类型，从而无法正常工作。

有人对我如何解决这个问题有任何建议吗？

这是脚本：

$(document).on('change', '[type="radio"][name="sort"]', function() {

  console.log('Destroying infiniteScroll');
  $('.car-grid').infiniteScroll('destroy');

  let selected = $(this).val();
  let url = new URI();

  url.removeQuery('sort');
  url.addQuery('sort', selected);
  url.removeSearch('page');
  url.addQuery('page', 1);
  url.suffix('json');

  updateGrid(url);
});

---

function updateGrid(url) {
  console.log(url);

  $.ajax({
    url: url,
    type: 'GET',
    success: function(data) {
      let template = $('#car-grid-template').html();

      let templateScript = Handlebars.compile(template);

      let html = templateScript(data);

      $('.thearea').html($(html));

      $('.car-grid').infiniteScroll({
        path: '.paginator .next_page a',
        append: '.car',
        scrollThreshold: 0
      });

      $('.car-grid').on( 'request.infiniteScroll', function( event, path ) {
        console.log( 'Loading page: ' + path );
      });
    }
  });
}

---

json.car_grid_html render partial: 'cars/car_grid.html.erb', locals: { cars: @cars }
json.paginator_html paginate(@cars, window: 1, outer_window: 2)
json.paginator_info_html page_entries_info(@cars)

Answer 1

你需要将dataType: 'html',添加到你的ajax params中。请参阅此http://api.jquery.com/jquery.ajax/并滚动到dataType部分