Как отобразить определенное количество элементов массива в рельсах

Question

У меня есть массив, и я хочу отображать только 4 элемента одновременно, и когда я нажимаю кнопку Далее, отображаются 4 следующих элемента. Посмотреть код:

<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">

Теперь вот код CoffeeScript:

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);

Моя идея состоит в том, чтобы позволить переменной count в представлении (<% count = 0%>) принять значение переменной вместо 0, но я не могу понять, как это сделать. Есть идеи?

Answer 1

Это выглядит как большая логика в ваших шаблонах представления, больше напоминает мне PHP.

Может быть, вы можете взглянуть на это: http://railscasts.com/episodes/174-pagination-with-ajax

Райан использует Gem для обработки нумерации страниц (Lookup Kaminari или WillPaginate), а затем использует беспрепятственный jQuery для обработки компонента AJAX.

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);
})

, чтобы страница обновлялась только после обработки обновления.Или, что еще лучше, напишите обратный вызов success, который тут же обновляет HTML на странице, а не обновляет всю страницу.Ваши пользователи будут вам благодарны.