2

我有一个事件搜索结果页面，用户可以在其中单击“添加到收藏夹”按钮。

单击该按钮执行 POST 以将事件添加到用户的收藏夹。如果他们再次搜索，他们现在将看到该事件的“从收藏夹中删除”按钮，而不是“添加到收藏夹”按钮。

目前在收藏夹控制器中创建操作我使用了一个 respond_to 所以 format.js 允许用户留在那个搜索结果页面上。

但是我如何渲染“从收藏夹中删除”按钮的部分，而不是“添加到收藏夹”按钮的部分。

这样，他们可以在必要时为他们刚刚收藏的项目单击“从收藏夹中删除”。

截图和代码如下。提前致谢。

截屏

-------------- 搜索结果项渲染器 ---------------

<div id="add_remove_favorite" class="user_event_info_container">
  <% if (signed_in? && current_user && current_user.id != user_event.user_id) %>
    <%= render partial: "shared/add_remove_favorite", 
      locals: { user_event: user_event } %>
  <% end %>
</div>

------------- 共享/_add_remove_favorite.html.erb ---------

<% if current_user.following?(user_event) %>
  <%= render partial: 'shared/remove_favorite', 
    locals: { user_event: user_event } %>
<% else %>
  <%= render partial: 'shared/add_favorite', 
    locals: { user_event: user_event } %>
<% end %>

-------------- 共享/_add_favorite.html.erb ----------

<%= form_for(current_user.favorites.build(followed_event_id: user_event.id), remote: true) do |f| %>
  <div class="hidden"><%= f.hidden_field :followed_event_id %></div>
  <%= f.submit "Add to favorites", 
    class: "info_button_small user_event_summary_item" %>
<% end %>

-------------- 共享/_remove_favorite.html.erb ------------

<%= form_for(current_user.favorites.find_by_followed_event_id(user_event),
  html: { method: :delete }, remote: true) do |f| %>
  <%= f.submit "Remove from favorites", class: "info_inline_control info_button_small user_event_summary_item" %>
<% end %>

-------------- views/create.js.erb ------------ 这里应该去什么？我想这就是我施展魔法的地方。

-------------- views/destroy.js.erb ------------ 这里应该去什么？我想这就是我施展魔法的地方。

4

2 回答 2

1

我解决了这个问题，以下是我的工作解决方案，关于如何在单击按钮时切换按钮的部分。

我的场景是一个用户事件应用程序，用户可以在其中搜索与日期、标题、地点等条件匹配的事件。我有一个事件搜索结果页面，用户可以在其中单击“添加到收藏夹”按钮。当他们这样做时，应将按钮替换为“从收藏夹中删除”按钮，以防他们改变主意并且不想要那个收藏夹。

我的解决方案在控制器操作中使用了带有 format.js 的 respond_to，它允许用户停留在该搜索结果页面上，而无需刷新页面。屏幕截图和下面只有相关代码。

希望这对其他人有帮助。谢谢大家的建议！

截屏

---------- 部分搜索结果项目代码 ------------

<div id="add_remove_favorite">
  <% if (signed_in? && current_user && current_user.id != user_event.user_id) %>
    <%= render partial: "shared/add_remove_favorite", 
      locals: { user_event: user_event } %>
  <% end %>
</div>

---- 部分决定是否应显示“添加到收藏夹”或“从收藏夹中删除”----

<% if current_user.following?(user_event) %>
  <%= render partial: 'shared/remove_favorite', 
    locals: { user_event: user_event } %>
<% else %>
  <%= render partial: 'shared/add_favorite', 
    locals: { user_event: user_event } %>
<% end %>

------------“添加到收藏夹”按钮的部分内容----------------

<%= form_for(current_user.favorites.build(followed_event_id: user_event.id), 
  html: { id: "event_number_#{user_event.id}" }, remote: true) do |f| %>
  <div class="hidden"><%= f.hidden_field :followed_event_id %></div>
  <%= f.submit "Add to favorites %>
<% end %>

------------ 部分用于“从收藏夹中删除”按钮 ------------

<%= form_for(current_user.favorites.find_by_followed_event_id(user_event),
  html: { id: "event_number_#{user_event.id}", method: :delete }, remote: true) do |f| %>
  <%= f.submit "Remove from favorites %>
<% end %>

-------- 具有创建和销毁操作的收藏夹控制器 ---------

class FavoritesController < ApplicationController
  before_filter :signed_in_user

  def create
    @user_event = UserEvent.find(params[:favorite][:followed_event_id])
    current_user.follow!(@user_event)
    respond_to do |format|
      format.html { redirect_to user_path(current_user) }
      format.js
    end
  end

  def destroy
    @user_event = Favorite.find(params[:id]).followed_event
    current_user.unfollow!(@user_event)
    respond_to do |format|
      format.html { redirect_to user_path(current_user) }
      format.js
    end
  end
end

------------- create.js.erb ------------

<% if @current_user.following?(@user_event) %>
  $("#event_number_<%= @user_event.id %>").replaceWith('<%= escape_javascript(render(
    partial: 'shared/remove_favorite', locals: { user_event: @user_event })) %>');
<% end %>

------------- destroy.js.erb ----------

<% if !@current_user.following?(@user_event) %>
  $("#event_number_<%= @user_event.id %>").replaceWith('<%= escape_javascript(render(
    partial: 'shared/add_favorite', locals: { user_event: @user_event })) %>');
<% end %>
于 2013-07-02T06:58:41.093 回答
1

您需要将 uniq id 分配给声明表单的添加/删除部分。这可以使用 event_id 来完成（因为列出了事件并且您将拥有 uniq 事件）。您可以通过表单将事件 id 作为隐藏字段发送，并在 js.erb 文件中使用它来查找部分并替换/修改它。

在 js.erb 中使用下面的代码。语法是haml。

- if @event.favorite? #event is saved as favorite
  $('#event_number_#{event.id}').replaceWith("#{escape_javascript(render(partial: 'shared/remove_favorite', locals: {local_variable: some_variable}))}");
- unless @event.favorite? #event is not fav
  $('#event_number_#{event.id}').replaceWith("#{escape_javascript(render(partial: 'shared/add_favorite', locals: {local_variable: some_variable}))}");

在“form_for”的“html”选项中，您可以添加

html:{ id: "event_number_#{event.id}", class: 'some class'}

我更喜欢使用带有“remote”选项的“link_to”而不是“form”，因为我只需要更改链接文本。链接 url 将是相同的，并且事件对象上只有 2 个操作“添加”和“删除”。该事件不能“添加”到收藏夹两次。您可以设置链接 id 并在参数中传递事件 id 并在 js.erb 文件中找到 id 并更改链接文本而不是替换部分内容，这样会更好。如果正在使用表单提交更多数据（我在提供的视图中看不到任何其他数据），则继续使用表单。

于 2013-07-01T07:14:44.917 回答