javascript - Rails 使用 ajax 调用更新多态对象的表部分

Question

当我使用 ajax 调用创建/销毁对象时，我在更新表(添加/删除行)时遇到问题。

我正在开发的应用程序可以将任务分配给各种类别，例如项目、文档等。任务模型是通过与这些对象的多态关系来实现的。

我当前正在渲染任务列表和表单以将新任务创建为部分任务。 form_for a new task使用ajax来显示/隐藏表单并创建新任务。

我遇到的问题是我能够创建和销毁任务，并且 form_for 似乎正在工作。但是，当我尝试在 js.erb 调用中重新渲染部分时，我无法更新表。该表只会在刷新时更新。

(我还在销毁操作上生成了 406 未知格式错误，我还没有弄清楚，但由于销毁和创建操作是相同的，我假设我仍然会遇到非更新问题)

任务 Controller

class TasksController < ApplicationController
  before_action :set_task, only: [:show, :edit, :update, :destroy]
    before_action :logged_in_user, only: [:index, :my_tasks, :edit, :update, :destroy]  
    respond_to :html, :json, :js
.
.
.
  def create
    @assignable = find_assignable
    @task = @assignable.tasks.build(task_params)
    if @task.save
        respond_to do |format|
            format.js
            format.html {redirect_to @task}
        end
    else
        respond_to do |format|
            format.html { render :new }
            format.json { render json: @task.errors, status: :unprocessable_entity }
        end
    end
  end

  def new
    @assignable = params[:assignable_type].constantize.find_by(params[:assignable_id])
    @task = Task.new
  end

  def destroy
        @assignable = params[:assignable_type].constantize.find_by(params[:assignable_id])
        @assignable.tasks.find(params[:id]).destroy
    respond_to do |format|
        format.js
        format.html {redirect_to :action => :index, status: 303 }
        format.json { head :no_content }
    end
  end
.
.
.
def find_assignable
    params.each do |name, value|
        if name =~ /(.+)_id$/
            return $1.classify.constantize.find(value)
        end
    end
       nil
end

我正在创建任务列表的部分任务/_task_list

    %tbody
      - assignable.tasks.each do |task|
        -# the path builder below only works if there is one underscore in the object name. MasterPo --> master_pos
        - path = "#{task.assignable_type.gsub(/([a-z])(?=[A-Z])/,'\1_\2').downcase.pluralize}/#{assignable.id}/tasks/#{task.id}" 
        %tr
          %td= best_in_place task, :description, :url => path
          %td= best_in_place task, :priority, :url => path
          %td= best_in_place task, :status, :as => :select, 
            :collection => {"1" => "Approved", "2" => "Pending", "3" => "Outstanding", "4" => "Review"}, :url => path
          %td= best_in_place task, :created_by, :url => path
          %td= task.assignable_type
          %td= link_to 'delete', 
            task_path(assignable, assignable_id: assignable.id, assignable_type: assignable.class.name, id: task.id), 
            remote: true, method: :delete, data: {confirm: 'Are you sure'} 

  %br

  .row
    .col-md-2.col-md-offset-4
      = link_to new_task_path(assignable, assignable_id: assignable.id, assignable_type: assignable.class.name), remote: true do
        %button.btn.btn-default New Task

  .row
    #task-form{:style => "display:none;"}

  :javascript
  $(document).ready(function() {
    /* Activating Best In Place */
    jQuery(".best_in_place").best_in_place();
  });

这称为我的部分表单，如下所示以供引用:

任务/_form

= simple_form_for [@assignable, Task.new], remote: true do |f|
  - if Task.new.errors.any?
    #error_explanation
      %h2= "#{pluralize(@task.errors.count, "error")} prohibited this task from being saved:"
      %ul
        - @task.errors.full_messages.each do |msg|
          %li= msg

  = f.input :description, as: :text
  = f.input :priority, collection: 1..5
  = f.input :status, collection: ["Open", "Completed", "Assigned"]
  = f.button :submit

现在，我假设我的错误必须是我尝试在 create.js.erb 和 destroy.js.erb 中渲染 _task_list 部分的方式。 js.erb 文件如下:

create.js.erb

$('#tasks').html("<%= j (render partial: 'tasks/task_list', locals: {assignable: @assignable}) %>");
$('#task-form').slideUp(350);

new.js.erb

$('#task-form').html("<%= j (render 'form', locals: {assignable: @assignable}) %>");
$('#task-form').slideDown(350);

和destroy.js.erb

$('#tasks').html("<%= j (render partial: 'tasks/task_list', locals: {assignable: @assignable}) %>");

Answer 1

您的@assignable对象不会重新加载。它仍然包含以前的所有数据。在方法中再次定义它，以便更新它，并且该表将在您的 View 中更新而无需刷新。