Ruby on Rails 和 Jquery：提交后尝试切换字符

Question

第一次在这里发帖，如果有问题（我如何输入代码，如果我包含的内容不够多，或者我的问题太模糊），我深表歉意。

我对 RoR 非常非常陌生，我从构建一个井字游戏开始。我已经将它构建为在命令行上工作，现在我正在尝试使其基于 Web。我有一个可点击的板，会弹出 X 和 O 图像。这与下面的表格相关联（一旦一切正常，我将使其不可见）记录哪个玩家点击了哪个位置。

目前，我遇到了在提交页面后尝试切换播放器的问题。我正在使用 jQuery 进行点击。单击时，我将每个空间弹出为“X”，我只是不知道在提交后如何将播放器更改为“O”。我应该通过 jQuery 还是 Ruby 来做到这一点？还有，我该怎么做？

为了澄清，我意识到我的代码可能不是最干净的，但目前我更担心功能，稍后会使其更美观。

jQuery:

$(document).ready(function(){

  $(".square").click(function(){
    //   Gather the position that was clicked
    var number = $(this).data("position");
    // Locate the game form
    var form = $("form");
    // Locate the input field corresponding to that position
    var input = $("input[data-position='" + number + "']");
    // Set the value of that input field to "X" or "O"
    input.val("X");
    // Submit the form
    form.submit();
  });
});

鲁比：

def create
  @game = Game.new(game_params)
  @game.save

  redirect_to @game
end

def update
  @game = Game.find(params[:id])
  @game.update(game_params)
  redirect_to @game
end

def show
  @game = Game.find(params[:id])
end

private
def game_params
  params.require(:game).permit(:player_1, :player_2, moves_attributes: [:player, :id])
end

HTML 表单：

<%= nested_form_for @game do |f| %>

  <%= f.fields_for :moves do |move_form| %>
    <p>
      <%= move_form.label :position %><br>
      <%= move_form.text_field :player, data: {position: move_form.object.position} %>
      <%= move_form.hidden_field :id %>
    </p>
  <% end %>

<input type="Submit">
<% end %>

HTML 游戏板：

<div id="board" align = center>
  <table>
    <tr>
      <td data-position="0" class="square <%= class_for_move(0)%>"></td>

棋盘上的 9 个方格中的每一个方格都是一样的。

为以下人员提供下一个拦截器的链接：jQuery .click function is not working without a string

Answer 1

您需要在表单提交之间保持当前玩家状态。

有多种方法可以做到这一点。一种方法（也许不是最好的方法）是将当前播放器存储在会话哈希中，并在每次提交表单时设置它。类似于（在 game_controller.rb 中）：

def switch_player
session[:current_player] = session[:current_player] == 'X' ? 'O' : 'X'
end

在控制器中的表单提交操作结束时调用switch_player

然后只需将它添加到您的板上（现在是 <p> 标签，可能应该是 div），例如：

<p id="board" data-current-player: <%=session[:current_player] %> >
  <%= move_form.label :position %><br>
  <%= move_form.text_field :player, data: {position: move_form.object.position} %>
  <%= move_form.hidden_field :id %>
</p>

然后你可以用 jQuery 把它拉出来：

   $(document).ready(function(){

var currentPlayer = $(#board).data("current-player");

      $(".square").click(function(){
        //   Gather the position that was clicked
        var number = $(this).data("position");
        // Locate the game form
        var form = $("form");
        // Locate the input field corresponding to that position
        var input = $("input[data-position='" + number + "']");
        // Set the value of that input field to "X" or "O"
        input.val(currentPlayer);
        // Submit the form
        form.submit();
      });
    });

顺便说一句，这看起来像是在练习 Rails，使用 CRUD、REST 和表单更新等。这最适用于数据密集型应用程序，其中模型表示数据库中的某个表，您使用表单来操作模型，从而操作数据库。我提出这个是因为井字游戏可能不是了解 Rails 基本功能的最佳领域。像待办事项列表这样的东西可能更合适。

如果我可以给你一些未经询问的建议，我会建议使用像 Sinatra 这样的东西。 Tic-tac-toe 并不真正需要数据库后端，而 Sinatra 将让您很好地了解路由、模板、处理 URL，而无需 Rails 的开销。你可以把它想象成 Rails lite。当你开始使用 Rails 时，你在那里学到的很多东西都会被转移。

Answer 2

看起来您对数据属性很满意，您可以将下一个符号存储在页面中的某个逻辑位置，并在单击表单时找到它。

所以而不是：

input.val("X");

你会这样做：

input.val($('#some-id').data('next-symbol'));

查看您的代码，您似乎基本上相信浏览器每次都会向您发送整个游戏的正确符号。考虑将其更改为让表单仅提交所选方块的位置，并在您的 Game 类中添加更多逻辑来跟踪谁进行了移动并相应地更新游戏世界。

我想你会发现这样一切都变得更简单了，而且我不能通过更改底层 DOM 并提交一个我有所有 9 个方块都用 X 填充的游戏而没有你的 O 的游戏来作弊！