ajax刷新表后如何保留输入标签值

Question

我有一个 ruby​​ on rails 应用程序，它显示了一个每 15 秒刷新一次其内容的表格。我按照这篇文章列出的步骤进行操作。

How To refresh a table in a Ruby on Rails view when there are new record to show automatically

对于表中的每一行，我都有一些输入字段，它们接受数字值并显示该数字的函数的输出。我将此事件设置为 onkeyup，因此它有点像 Excel 电子表格。 我不希望每次刷新表格内容时重置这些输入字段中的值。我想知道是否有某种方法可以在每次表刷新后保存这些值，或者让我的 javascript 专门不重新渲染输入元素。

这是我的部分 _match_table.html.erb

<% @data.each_with_index do |data, i| %>
    <% data.match_datetime == nil ? past = false : past = data.match_datetime.past? %>
    <tr id="<%= i %>_tr" class="larger_tr <%= 'danger' if past == true %>">
        <td scope="row"><%= i %></td>
        <td><%= data.team1 %></td>
        <td><%= data.team2 %></td>
        <td id="<%= i %>_ah_odds1" rowspan="5"><%= data.ah_odds1 %></td>
        <td rowspan="5"><%= data.ah %></td>
        <td id="<%= i %>_ah_odds2" rowspan="5"><%= data.ah_odds2 %></td>
        <td rowspan="5"><%= data.ou %></td>
        <td id="<%= i %>_ou_odds1" rowspan="5"><%= data.ou_odds1 %></td>
        <td id="<%= i %>_ou_odds2" rowspan="5"><%= data.ou_odds2 %></td>
        <td rowspan="5"><% if data.match_datetime != nil %>
                <%= local_time(data.match_datetime) %><br>
                <% if past %>Match Ended
                <% else %>
                    Time remaining: &nbsp;
                    <% diff = (data.match_datetime - Time.now) %>
                    <% time_left = diff.to_i %>
                    <% if time_left < 3600 %>
                        <%= time_left/60 %> minutes
                    <% elsif time_left < 86400 %>
                        <%= time_left/3600 %> hours
                    <% else %>
                        <%= time_left/86400 %> days
                    <% end %>
                <% end %>
            <% end %>
        </td>
    </tr>
    <% if data.match_datetime != nil %>
    <tr class="smaller_tr warning">
        <td>AH returns</td>
        <td><input class="mytext form-control" id="<%= i %>_ah_team1" type="number"></td>
        <td><input class="mytext form-control" id="<%= i %>_ah_team2" type="number"></td>
    </tr>
    <tr class="smaller_tr">
        <td>amount</td>
        <td><b id="<%= i %>_ah_am1"></b></td>
        <td><b id="<%= i %>_ah_am2"></b></td>
    </tr>
    <tr class="smaller_tr warning">
        <td>OU returns</td>
        <td><input class="mytext form-control" id="<%= i %>_ou_team1" type="number"></td>
        <td><input class="mytext form-control" id="<%= i %>_ou_team2" type="number"></td>
    </tr>
    <tr class="smaller_tr">
        <td>amount</td>
        <td><b id="<%= i %>_ou_am1"></b></td>
        <td><b id="<%= i %>_ou_am2"></b></td>
    </tr>
    <% end %>

<% end %>

Answer 1

简短的回答是“是的，有办法”。事实上，可能有很多很多方法。例如，了解您是否正在尝试更新现有行中的值、添加新行、两者兼而有之，或者其他什么，这将很有帮助。这些细节（可能还有其他细节）将对可行的解决方案产生重大影响。

此外，这段代码还有很多需要改进的地方...

data 是复数形式。 datum 是 data 的单数形式。在任何情况下，data 都不是一个描述性很强的变量名。为什么不使用matches 之类的东西？

我建议您创建一个DatumDecorator（也许使用SimpleDelegator）来处理您在erb 中执行的一些逻辑。一些东西，也许，比如：

#app/decorators/datum_decorator.rb

DatumDecorator < SimpleDelegator

  def past?
    match_datetime.try(:past?)
  end

  def time_remaining
    return "Match Ended" if past?
    time_left = (match_datetime - Time.now).to_i
    return "#{time_left/60} minutes" if time_left < 3600
    return "#{time_left/3600} hours" if time_left < 86400
    "#{time_left/86400} days"
  end

end

如果past 的值为true、false 或nil，则不要使用if past == true。你就做if past

你不需要做if data.match_datetime != nil，你可以做if !data.match_datetime.nil?或者更好的if data.match_datetime（nil是一个错误的值）。

<% @data.each_with_index do |datum, i| %>
  <% d_datum = DatumDecorator.new(datum) %>
  <% past = d_datum.past? %>
  <tr id="<%= i %>_tr" class="larger_tr <%= 'danger' if past %>">
    <td scope="row"><%= i %></td>
    <td><%= datum.team1 %></td>
    <td><%= datum.team2 %></td>
    <td id="<%= i %>_ah_odds1" rowspan="5"><%= datum.ah_odds1 %></td>
    <td rowspan="5"><%= datum.ah %></td>
    <td id="<%= i %>_ah_odds2" rowspan="5"><%= datum.ah_odds2 %></td>
    <td rowspan="5"><%= datum.ou %></td>
    <td id="<%= i %>_ou_odds1" rowspan="5"><%= datum.ou_odds1 %></td>
    <td id="<%= i %>_ou_odds2" rowspan="5"><%= datum.ou_odds2 %></td>
    <td rowspan="5">
      <% if datum.match_datetime %>
        <%= local_time(data.match_datetime) %><br>
        <%= d_datum.time_remaining %>
      <% end %>
    </td>
  </tr>
  <% if datum.match_datetime %>
    <tr class="smaller_tr warning">
      <td>AH returns</td>
      <td><input class="mytext form-control" id="<%= i %>_ah_team1" type="number"></td>
      <td><input class="mytext form-control" id="<%= i %>_ah_team2" type="number"></td>
    </tr>
    <tr class="smaller_tr">
      <td>amount</td>
      <td><b id="<%= i %>_ah_am1"></b></td>
      <td><b id="<%= i %>_ah_am2"></b></td>
    </tr>
    <tr class="smaller_tr warning">
      <td>OU returns</td>
      <td><input class="mytext form-control" id="<%= i %>_ou_team1" type="number"></td>
      <td><input class="mytext form-control" id="<%= i %>_ou_team2" type="number"></td>
    </tr>
    <tr class="smaller_tr">
      <td>amount</td>
      <td><b id="<%= i %>_ou_am1"></b></td>
      <td><b id="<%= i %>_ou_am2"></b></td>
    </tr>
  <% end %>
<% end %>