javascript - Rails form_for has_many 通过使用 AJAX 的关联不起作用

Question

我在建立关联的 form_for 方面遇到问题。我有一个事件模型、一个用户模型和一个参加者模型。模型代码如下:

class User < ActiveRecord::Base
    has_many :activities, class_name: "Attendee", dependent: :destroy
    has_many :events, through: :activities

class Event < ActiveRecord::Base
    has_many :attendees, dependent: :destroy
    has_many :users, through: :attendees

class Attendee < ActiveRecord::Base
    belongs_to :user
    belongs_to :event

在事件的显示页面上，我有一个用于加入事件的按钮，该按钮可在用户和事件之间创建关联。

<div id="join_event">
    <% if current_user.events.include?(@event) %>
        <%= render 'leave_event' %>
    <% else %>
        <%= render 'join_event' %>
    <% end %>
</div>

join_event 和leave_event 部分是:

加入事件:

<%= form_for(current_user.activities.build(event_id: @event.id), remote: true) do |f| %>
    <%= f.hidden_field :event_id %>
    <%= f.submit "Join event" %>
<% end %>

离开事件:

<%= form_for(current_user.activities.find_by(event_id: @event.id), html: { method: :delete }, remote: true) do |f| %>
    <%= f.submit "Leave event" %>
<% end %>

上面部分中的@event位于events_controller中的show方法中:

def show
    @event = Event.find(params[:id])
end

attendees_controller中的create和destroy方法如下:

def create
    @user_event = Event.find(params[:attendee][:event_id])
    current_user.events.push(@user_event)
    respond_to do |format|
        format.html { redirect_to event_path(@user_event) }
        format.js
    end
end

def destroy
    @user_event = Attendee.find(params[:id])
    current_user.activities.destroy(@user_event)
    respond_to do |format|
        format.html { redirect_to root_path }
        format.js
    end
end

问题是，当我单击“加入事件”按钮时，会发生注释。 Chrome 开发工具中“网络”选项卡下显示的错误如下:

undefined method `id' for nil:NilClass
Extracted source (around line #1):
    <%= form_for(current_user.activities.find_by(event_id: @event.id), html: { method: :delete }, remote: true) do |f| %>
        <%= f.submit "Leave event" %>
    <% end %>

突出显示的行是带有“current_user.activities.find_by(event_id: @event.id)”的第一行。当我检查数据库(我使用 PostgreSQL)时，关联已经创建，如果我点击刷新按钮，leave_event 部分就会被渲染。所以问题似乎是使用 AJAX 我无法访问事件显示页面的 id。当我尝试单击“离开事件”按钮时，也会出现同样的问题。什么也没有发生，Chrome 开发工具中“网络”选项卡下显示的错误如下:

undefined method `id' for nil:NilClass
Extracted source (around line #1):
    <%= form_for(current_user.activities.build(event_id: @event.id), remote: true) do |f| %>
        <%= f.hidden_field :event_id %>
        <%= f.submit "Join event" %>
    <% end %>

关联被破坏，但“加入事件”按钮未呈现，因为 form_for 似乎无法从 url 访问 id(在本例中，url 为 localhost:3000/events/34 )

所以我的问题是，如何让 form_for 访问 url 中的事件 id？只要我点击浏览器上的刷新按钮，就会创建关联并呈现正确的表单，但我无法使用 AJAX 让它工作。

为了以防万一，create.js.erb 和 destroy.js.erb 文件(位于“views/attendees”中)是:

$("#join_event").html("<%= escape_javascript(render('events/leave_event')) %>")

$("#join_event").html("<%= escape_javascript(render('events/join_event')) %>")

Answer 1

我相信问题是您在应该使用 locals 时从部分调用 @event :

<%= render partial: "join_event", locals: { event: @event } %>

#app/views/controller/_join_event.html.erb
<%= form_for(current_user.activities.build(event_id: event.id), remote: true) do |f| %>