Ruby on Rails和Jquery：在提交后尝试切换字符 [英] Ruby on Rails and Jquery: trying to switch characters after submit

问题描述

首先发布在这里，所以如果有些事情是关闭的，我很抱歉（如果我没有包含足够的内容，或者我的问题太模糊，我是如何放入代码的）。

我对RoR非常非常新颖，我开始制作一个tic tac toe游戏。我已经建立它在命令行上工作，现在我试图使它基于Web。我有一个可点击的板子，弹出X和O图像。这与下面的一个表格绑定（一旦我拥有了所有的工作，我将使其隐形），它记录了哪个玩家点击了哪个位置。

现在，我正在在提交页面后尝试切换播放器的问题。我正在使用jQuery进行点击。点击时每个空格弹出为X，但我无法弄清楚在提交之后如何将玩家变为O。我应该通过jQuery还是Ruby来做到这一点？而且，我该怎么做？

为了澄清，我意识到我的代码可能不是最干净的，但此刻我更担心功能，以及稍后会让它更加显示。

jQuery：

  $（文件）.ready（函数（）{
 
 $（。square）。click（function（）{
 //收集被点击的位置
 var number = $（this）.data（position）; 
 //找到游戏形式
 var form = $（form）; 
 //找到对应于该位置的输入字段
 var input = $（input [data-position ='+ number +'））; 
 //将输入字段的值设置为X或O
 input.val（X）; 
 //提交表单
 form.submit（）; 
}）; 
}）; 
  

Ruby：

  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（：游戏）.permit（：player_1，：player_2，moves_attributes：[：player，：id]）
 end 
  

HTML表单：

 <％= nested_form_for @game do | f | ％GT; 
 
 <％= f.fields_for：moves do | move_form | ％GT; 
< 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 =boardalign = center> 
< table> 
< tr> 
< td data-position =0class =square<％= class_for_move（0）％>>< / td> 
  

板子上9个方格中的每一个都是一样的。

链接到下列阻止者：

解决方案

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

有很多方法可以做到这一点。一种方式（可能不是最好的方法）是将当前玩家存储在会话哈希中，并将其设置为每个表单提交。类似于（在game_controller.rb中）：

  def switch_player 
 session [：current_player] = session [：current_player] =='X'？ 'O'：'X'
 end 
  

拨打 switch_player 在表单提交操作结束时在控制器中

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

 < p id =boarddata-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（）{
 //收集被点击的位置
 var number = $（this）.data（position ）; 
 //找到游戏形式
 var form = $（form）; 
 //找到对应于该位置的输入字段
 var input = $（ input [data-position ='+ number +'）; 
 //设置输入字段的值为X或O
 input.val（currentPlayer）; 
 //提交表单
 form.submit（）; 
}）; 
}）; 
  

另一方面，它看起来像是在练习Rails，利用CRUD，REST和表单更新以及喜欢。这对于更多的数据密集型应用程序来说效果最佳，其中模型表示数据库中的某个表格，并使用表单来操纵模型，从而控制数据库。我提出这个问题是因为一个井字游戏可能不是了解基本Rails功能的最好的领域。像待办事项列表可能更合适。

如果我可以给你更多的免费建议，我会建议使用像Sinatra这样的东西。 Tic-tac-toe并不需要数据库后端，而Sinatra会给你一些很好的路由，模板，URL处理方式，而不需要Rails的开销。你可以把它看作Rails lite。当你开始使用Rails的时候，你学到的许多东西都会转移过来。

First post on here, so I apologize if some things are off (how I put in the code, if I'm not including enough, or if my question is too vague).

I am very, very new to RoR, and I'm starting by building a tic tac toe game. I already built it to work on the command line, and now I am trying to make it web-based. I have a clickable board, with X and O images that pop up. This is tied to a form below (which I will make invisible once I have everything working) that registers which player clicked which position.

At the moment, I'm having an issue of trying to switch players after the page is submitted. I am using jQuery for the click. I have each space pop up as "X" when clicked, I just can't figure out how, after the submit, to have the player changed to "O". Should I be doing that through jQuery, or Ruby? And, how would I do that?

To clarify, I realize that my code might not be the cleanest, but at the moment I'm worried more about functionality, and will later make it more presentable.

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

Ruby:

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 form:

<%= 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 game board:

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

And it's the same for each one of the 9 squares on the board.

Link to the next blocker for those following: jQuery .click function is not working without a string

解决方案

You're going to need to keep the current player state somewhere between form submits.

There are a number of ways you can do this. One way (maybe not the best way) is to store the current player in the session hash and set it with each form submit. Something like (in game_controller.rb):

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

Make a call to switch_player at the end of your form submit action in the controller

Then just add it to your board (which right now is a <p> tag, probably should be a div) like:

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

Then you can just pull it out with 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();
      });
    });

As an aside, it looks like your practicing with Rails, utilizing CRUD, REST and form updates and the like. This works best with more data intensive applications, where the model represents some table in a database and you use forms to manipulate the models and, thus, the database. I bring this up because a tic-tac-toe game may not be the best domain to get to know basic Rails functionality. Something like a todo list might be more appropriate.

If I could give you a little more unasked advice, I would suggest using something like Sinatra. Tic-tac-toe doesn't really need a database backend, and Sinatra will give you some good exposure to routing, templating, handling URLs, without the overhead of Rails. You could think of it as Rails lite. And much of what you learn there will transfer over when you start working with Rails.

这篇关于Ruby on Rails和Jquery：在提交后尝试切换字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！