javascript - 使用AJAX渲染index.js.erb文件合适吗？

Question

我对使用 AJAX 呈现页面是否合适感到有点困惑。首先，我将解释我想要做什么，然后解释我的逻辑。

我正在制作一个任务列表 Rails 应用程序。创建任务后，我希望创建的任务显示在索引页面上，并根据其优先级使用颜色代码。高任务为红色，中任务为橙色，低任务为绿色。为此，我知道我需要 jQuery 来添加 .css 或 addClass 方法，但我对如何执行此操作感到困惑。在之前的一个问题中，用户 meager 告诉我，我需要将信息从 Controller 发送到我的 priority.js.erb 文件，其中包括:

  $(document).ready(function(){
    if (<% @task.importance == "Low" %>) {
      $("td").addClass("green");
    } else if(<% @task.importance == "Medium" %>) {
      $("td").addClass("orange");
    } else {
      $("td").addClass("red");
    }
  });

我知道 Controller 需要为它提供服务，因为我的 priority.js.erb 文件因 @task 不存在而中断。但这是我不明白的事情。我如何执行此操作以及我需要哪些文件。我知道 AJAX 通常用于不需要刷新页面的功能，例如在博客上发表评论之类的，但我想要的确实需要刷新页面。我需要有人点击 new.html.erb，创建一个转到我的 Controller 的任务，执行如下操作:

def create
@task = Task.new(task_params)
respond_to do |format|
    format.html do
      redirect_to tasks_path, notice: "Task created!"
    end

    format.json do
      render json: @task
    end
  end
end

然后刷新index.html页面。我需要一个单独的 index.js.erb 文件来执行此操作吗？

或者我对使用 AJAX 的看法完全错误？我什至需要使用它吗？我只是非常困惑，因为我不确定需要做什么。如果你们需要详细说明或提供更多信息，请告诉我，我将编辑问题。我真的很想让这个功能发挥作用。谢谢。

Answer 1

您不需要任何 AJAX。正如您在上面的评论中提到的，您的 new 表单正在将任务信息发布到 TasksController 中的 create 方法。

在您的 TasksController create 方法中:

def create
  @task = Task.new(task_params)
  if @task.save
    respond_to do |format|
        format.html do
          redirect_to tasks_path, notice: "Task created!"
        end
        # you probably don't need this, at this time (but it doesn't hurt)
        format.json do 
          render json: @task
        end
    end
  end
end

请务必使用 @task.save 保存任务，因为在原始帖子中您的 Controller 代码中缺少它。

然后，在您的 TasksController index View 中(app/views/tasks/index.html.haml 或 app/views/tasks/index.html。 erb)，你可以这样做(使用 HAML 作为我的 View 语言):

- @tasks.each do |task|
  - case task.importance.titleize
  - when 'Low'
    %tr.green
  - when 'High'
    %tr.red
  # the above assumes you want to apply a background color to an entire table row
    %td= task.name (etc.)

在一些样式表中:

.green { background-color: #SOMEHEX; }
.red { background-color: #SOMEOTHERHEX; }

当您的索引页面呈现时，显示所有请求的任务，您的 HAML 或 ERB 索引 View 将根据每个任务的重要性属性在您的表行上输出一个类。通过在样式表中定义类，表格中的行将以正确的颜色等显示。

由于您在网络应用程序中使用基本的请求-响应方法，因此您不需要 AJAX。

希望对您有所帮助!