Question

您好我正在使用Rails + JS + Ajax进行Waldo（Wally）游戏的简单克隆。这个想法是：玩家变成3个图像，并且必须检查3个字符（Waldo，Wilma，Wizard）的位置。 3.图像显示字段提交名称后提交显示高分列表。

到目前为止，我已经编写了时间机制（带有setInterval的JS变量），点（JS + AJAX + rails控制器），但我无法对提交名称，点和时间进行编码。

我的观点文件：

SELECT ref_no,
    max(CASE WHEN code = 1 THEN code END) AS 'count_1',
    max(CASE WHEN code = 2 THEN code END) AS 'count_2',
    max(CASE WHEN code = 3 THEN code END) AS 'count_3',
    max(CASE WHEN code = 4 THEN code END) AS 'count_4',
    max(CASE WHEN code = 5 THEN code END) AS 'count_5',
    max(CASE WHEN code = 6 THEN code END) AS 'count_6'
FROM data
GROUP BY ref_no
ORDER BY ref_no

我的控制器文件：

<%= form_tag('/check/highscore',  method: :post, format: :js, remote: true ) do %> 
    <%= text_field_tag 'name', 'enter your name' %>
    <%= submit_tag 'submit' %>
  <% end %>

<script type="text/javascript">
 $.ajax({
 url: "<%= highscore_check_index_path %>",
 type: "POST",
 format: "js",
 dataType: "script",
 data: { username: $(this).username, score: guessd, time: time  }, 
 success: function(data) {
 $('send_highscore').append('data.username')    
 window.waldo.HS()
},
});
};

my highscore.js.erb

def highscore
 @username = params[:name] 
 respond_to do |format|
  format.js { render :layout => false } 
  format.html
 end
end
def highscore2
 record = Highscore.new 
 record.username = params[:username]
 record.score = params[:score] 
 record.time = params[:time]
 record.save 
end

我知道，我的oode质量很差，但我现在尝试学习它。问题是highscore.js.erb没有执行，虽然我在作为js脚本文件呈现的firebug中看到它。 highscore.js.erb的想法是混合ruby和js变量，并一起在check controller中发送highscore2动作并保存到db。

Answer 1

js.erb是一种不好的学习方式。

通过使用remote: true并返回JS.erb响应，Ruby on Rails可以用作一种糟糕的单一页面体系结构。但真正做到的只是让你有足够的绳索来吊死自己。

这是学习ajax的一种非常糟糕的方式，因为它会导致代码组织不良和非RESTful应用程序，因为它会导致关注程序而不是资源。

我反而鼓励你尝试学习ajax而不混合使用ERB和JS。混合服务器端和客户端逻辑只会使一切变得更加复杂，因为您必须跟踪发生的情况。

相反，您可能希望专注于在app/assets/javascripts中设置可重用的javascript函数并获取JSON数据而不是javascript过程。

这将告诉您不仅要在Rails中执行ajax，还要教您如何使用外部API执行此操作，并教您如何构建和组织代码的宝贵课程。

让我们开始研究如何重构：

高分应该是一种资源。

让我们从设置路线开始：

resources :highscores, only: [:create, :index, :show]

控制器：

class HighscoresController < ApplicationController
  respond_to :json, :html

  def create
    @highscore = Highscore.create(highscore_params)
    respond_with @highscore
  end

  def index
    @highscores = Highscore.order(score: :desc).all
    respond_with @highscores
  end

  def show
    @highscore = Highscore.find(params[:id])
    respond_with @highscore
  end

  private
    def highscore_params
      params.require(:highscore).permit(:username, :time, :score)
    end
end

Responders是一个非常棒的工具，它使我们在返回响应时不必做一堆样板代码。如果成功，我们的create方法将返回200 OK，如果失败，我们将返回422 BAD ENTITY或其他一些“错误”响应代码。

一些javascript脚手架

让我们设置一些脚手架，以便我们可以将javascript连接到特定的控制器和操作，而无需使用内联脚本标记。

打开layouts/application.html.erb并替换<body>代码：

<%= content_tag :body, data: { action: action_name, controller: controller_name } do %>
  <%= yield %>
<% end %>

然后将这一小部分添加到applicaiton.js：

// Triggers events based on the current controller and action.
// Example:
// given the controller UsersController and the action index
// users:loaded
// users.index:loaded
$(document).on('page:change', function(){
  var data = $('body').data();
  $(this).trigger(data.controller + ":loaded")
         .trigger(data.controller + "." + data.action + ":loaded");
});

ajax你们都在谈论'回合？

假设我们有一个我们想要定期更新（轮询）或用户提交高分的高分榜。

// app/assets/javascripts/highscores.js
function getHighscores(){
  var $self = $('.highscores-list');
  return $.getJSON('/highscores').done(function(highscores){
    var elements = $.map(highscores, function(h){
      return $('<li>').text([h.username, h.score].join(', '));
    });
    $self.empty().append(elements);
  });
};

$(document).on('games:loaded highscores:loaded', function(){
  // refresh highscores every 5 seconds
  (function refresh(){
    getHighscores().done(function(){
      window.setTimeout(refresh, 5000);
    });
  }());
});

最后一部分有点毛茸茸 - 它是一个递归函数，在ajax调用完成后设置一个新的计时器。我们使用此而非setInterval的原因是setInterval并不关心先前的调用是否已完成。

创建高分。

首先让russle up表格：

<%# app/views/highscores/_form.html.erb %>
<%= form_for(local_assigns[:highscore] || Highscore.new), class: 'highscore-form' do |f| %>
  <div class="field">
    <%= f.label :username %>
    <%= f.text_field :username %>
  </div>
  <%= f.hidden_field :score %>
  <%= f.hidden_field :time %>
  <%= f.submit %>
<% end %>

然后让我们用一些ajax善良来煽动它：

$(document).on('games:loaded highscores:loaded', function(){
  $('#new_highscore').submit(function(e){
    $.ajax(this.action, {
      data: {
        highscore: {
          username: this.elements["highscore[username]"].value,
          time: this.elements["highscore[time]"].value,
          score: this.elements["highscore[score]"].value
        }
      },
      method: 'POST',
      dataType: 'JSON'
    }).done(function(data, status, jqXHR){
      getHighscores();
      // todo notify user
    });
    return false; // prevent form from being submitted normally
  });
});

Rails + JS + Ajax请求

1 个答案:

js.erb是一种不好的学习方式。

让我们开始研究如何重构：

一些javascript脚手架

ajax你们都在谈论'回合？

创建高分。