레일에 특정 개수의 배열 항목을 표시하는 방법

Question

배열이 있는데 한 번에 4 개의 항목 만 표시하고 다음을 클릭하면 다음 4 개의 항목이 표시됩니다. 보기 코드 :

이

move_to_next_match = -> 
    $("#save_votes").click -> display_next_competitors() 

display_next_competitors = -> 
    project_id = document.getElementById("project_id").value 
    match_rows = $('.match_row') 
    results = [] 
    for i in [0...match_rows.length] 
    do (i) -> 
     radios = $(".group_#{i}") 
     for j in [0...radios.length] 
     do (j) -> 
      if radios[j].checked 
      count = radios[j].getAttribute 'name' 
      number = radios[j].getAttribute 'value' 
      results.push("#{count} #{number}") 
    data = "{\"get_matches_results\": \"#{results}-#{project_id}-#{marker}\"}" 
    $.ajax({ 
    type: "POST" 
    url: "projectss/pca_results" 
    data: "data=" + data 
    }) 
    location.reload(true); 

내 생각은보기에서 변수 수 (<퍼센트 수 = 0 %>) 변수의 값을을 수 있도록하는 것입니다 :

<table> 
<tr> 
    <th></th> 
    <th>3</th> 
    <th>2</th> 
    <th>1</th> 
    <th>1</th> 
    <th>2</th> 
    <th>3</th> 
    <th></th> 

</tr> 
<% count = 0 %> 
<% while count < 4%> 
    <tr class="match_row" value="<%=count%>"> 
    <th id="left_competitor"><%= @matches[count][0].title %></th> 
    <% (1..6).each do |i|%> 
     <th> <input type="radio" class="group_<%=count%>" name="<%=count%>" value="<%= i%>"><br></th> 
    <% end %> 
    <th id="right_competitor"> <%= @matches[count][1].title %></th> 
    </tr> 
    <br /> 
    <% count += 1 %> 
<% end %> 
<br /> 
</table> 
<input id="save_votes" type="button" value="Next"> 

지금 여기에 커피 스크립트 코드 0 대신에 어떻게해야 할지를 알 수 없다. 아이디어가 있으십니까?

Answer 1

이것은 뷰 템플릿에서 많은 논리처럼 보입니다. PHP를 더 많이 생각 나게합니다.

어쩌면 당신이 할 수있는 표를 살펴 : http://railscasts.com/episodes/174-pagination-with-ajax

라이언 매김 (조회 미나리 또는 WillPaginate)를 처리 할 수있는 보석을 사용하고 AJAX 구성 요소를 처리 할 수 ​​unobstructive jQuery를 사용합니다.

Answer 2

그것의 완전히 당신이 겪고있는 문제가 무엇 귀하의 질문에 분명하지만, 나는 그것이 잠재적으로 변경하는 서버에 요청을 보내는 코드

$.ajax({ 
type: "POST" 
url: "projectss/pca_results" 
data: "data=" + data 
}) 
location.reload(true); 

과 관련이있다 같은데요하지 페이지의 콘텐츠를 검색 한 다음 응답을 기다리지 않고 즉시 페이지를 새로 고칩니다. 경쟁 조건이 있습니다. 때로는 페이지 내용이 업데이트되기 전에 새로 고쳐 지기도합니다. 대신

$.ajax({ 
type: "POST" 
url: "projectss/pca_results" 
data: "data=" + data 
success: -> location.reload(true); 
}) 

이 페이지가 업데이트가 처리 된 후에 만 ​​갱신 될 수 있도록 작성해야합니다. 또는 더 나은 방법은 전체 페이지를 새로 고치는 대신 페이지의 HTML을 업데이트하는 success 콜백을 작성하는 것입니다. 사용자가 감사 할 것입니다.