Select2 "원격 데이터가있는 무한 스크롤"- 콜백이 실행되지 않음

Question

Select2 project page의 예제에 따라 사용자가 결과 집합의 맨 아래로 스크롤 할 때 더 많은 레코드를 가져 오려고합니다.

<script> 
    $(document).ready(function() { 
    $('#style_full_name').select2({ 
     placeholder: "Please type in the make and model", 
     minimumInputLength: 3, 
     ajax: { 
      url: "/list_styles", 
      dataType: 'json', 
      quietMillis: 100, 
      data: function (term, page) { // page is the one-based page number tracked by Select2 
      return { 
       q: term, //search term 
       page_limit: 10, // page size 
       page: page, // page number 
      }; 
      }, 
      results: function (data, page) { 
      var more = (page * 10) < data.total; // whether or not there are more results available 

      // notice we return the value of more so Select2 knows if more results can be loaded 
      return {results: data.styles, more: more}; 
      } 
     }, 
     formatResult: styleFormatResult, // omitted for brevity, see the source of this page 
     dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller 
     escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results 
    }); 
    function styleFormatResult(style) { 
     var markup = "<table class='style-result'><tr>"; 
     if (style.dimage_url !== undefined) { 
      markup += "<td class='style-image'><img src='" + style.dimage_url + "'/></td>"; 
     } 
     markup += "<td class='style-info'><div class='style-title'>" + style.full_name + "</div>"; 
     //if (movie.critics_consensus !== undefined) { 
     // markup += "<div class='movie-synopsis'>" + movie.critics_consensus + "</div>"; 
     //} 
     //else if (movie.synopsis !== undefined) { 
     // markup += "<div class='movie-synopsis'>" + movie.synopsis + "</div>"; 
     //} 
     markup += "</td></tr></table>" 
     return markup; 
    } 
    }); 
</script> 

선택 2의 페이지에 썩은 토마토 API 예제를 테스트하고 스크롤 목록의 맨 아래에 도달했을 때이 콜백이 발사되는 것을 볼 수있는 크롬 콘솔의 네트워크 패널을 추적하는 동안. 위의 유스 케이스에서 스크롤 목록의 맨 아래로 스크롤 할 때 이것은 발생하지 않습니다.

Answer 1

조금만 파고 나면 "total"이 내 json 응답의 일부가 아니므로 var more = (page * 10) < data.total은 false로 평가되었다는 것을 깨달았습니다. 다음은 무한 스크롤 작업을 수행하는 데 필요한 내 스타일 컨트롤러 (RoR)의 코드입니다.

def list_styles 
    #sunspot solr query 
    @styles = Style.search { fulltext params[:q]; paginate :page => params[:page], :per_page => params[:page_limit] } 

    #Build Json String 
    @styles = "{\"total\":#{@styles.total}, \"styles\":#{@styles.results.to_json(:only=>[:id, :full_name], :methods => [:dimage_url, :dimage_url_medium])}}" 

    #Render Json Response 
    respond_to do |format| 
     format.json {render :json => @styles } 
    end 
    end