如何在rails中显示一定数量的数组项

时间:2011-08-16 10:16:11

标签: ruby-on-rails ruby-on-rails-3 json jquery coffeescript

我有一个数组,我想一次只显示4个项目,当我点击Next时,它将显示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);

我的想法是让视图中的变量计数(&lt;%count = 0%&gt;)取一个变量的值而不是0,但我无法弄清楚如何做到这一点。 有什么想法吗?

2 个答案:

答案 0 :(得分:2)

这看起来像视图模板中的很多逻辑,让我想起更多PHP。

也许你可以看看这个:http://railscasts.com/episodes/174-pagination-with-ajax

Ryan使用Gem来处理分页(Lookup Kaminari或WillPaginate),然后使用无阻碍的jQuery来处理AJAX组件。

答案 1 :(得分:0)

从您的问题来看,您遇到的问题并不完全清楚,但我猜这与代码有关

$.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,而不是刷新整个页面。您的用户会感谢您。