Question

我正在构建一个完整的堆叠开发训练营计划的项目应用程序。我正在实现一个destroy方法，它从列表中删除一个给定的项目。我正在实施一个AJAX请求，该请求应该从列表中删除项目的li。 destroy方法正常工作，这意味着当我重新加载页面时元素已经消失，但是在没有重新加载页面的情况下它不会发生。

我的项目是通过部分呈现的：

<ul class="list-group">
  <% @list.items.each do |item| %>
    <!-- <li id="item-<%= @item.id %>" class="list-group-item"> -->
    <li class="list-group-item">
      <%= item.name %>
      <%= link_to "", [item.list, item], method: :delete, remote: true, class: 'glyphicon glyphicon-ok' %>
    </li> 
  <% end %>
</ul>

我的destroy.js.erb文件：

<% if @item.destroyed? %>
  $('#item-' +<%= @item.id %>).hide();
  // $('#item-' +<%= @item.id %>).closest('li');
  // self.closest('li').remove();
  // $('li#item-<%= @item.id %>').hide();
  // $('#item-' +<%= @item.id %>).parent().remove();
  // $("li").remove('li#item-<%= @item.id %>');
<% else %>
  $('#item-' +<%= @item.id %>).prepend("<div class='alert alert-danger'><%= flash[:error] %></div>");
<% end %>

在我的items_controller.rb中：

def destroy
    @list = List.find(params[:list_id])
    @item = Item.find(params[:id])

    authorize @item

    if @item.destroy
      flash[:notice] = "Task Completed."
      # redirect_to @list
    else
      flash[:error] = "Task couldn't be deleted. Try again."
    end

    respond_to do |format|
      format.html
      format.js 
    end
  end

选择要删除的列表项时的终端输出：

Started DELETE "/lists/28/items/105" for ::1 at 2015-04-13 16:51:57 -0400
Processing by ItemsController#destroy as JS
  Parameters: {"list_id"=>"28", "id"=>"105"}
  List Load (0.1ms)  SELECT  "lists".* FROM "lists" WHERE "lists"."id" = ? LIMIT 1  [["id", 28]]
  Item Load (0.0ms)  SELECT  "items".* FROM "items" WHERE "items"."id" = ? LIMIT 1  [["id", 105]]
  User Load (0.1ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ?  ORDER BY "users"."id" ASC LIMIT 1  [["id", 8]]
   (0.1ms)  begin transaction
  SQL (0.2ms)  DELETE FROM "items" WHERE "items"."id" = ?  [["id", 105]]
   (1.5ms)  commit transaction
  Rendered items/destroy.js.erb (0.6ms)
Completed 200 OK in 10ms (Views: 5.9ms | ActiveRecord: 2.0ms)

注释掉的行是我尝试删除元素的各种方法。非常感谢任何帮助。

Answer 1

当您输出li时，您应该附上dom_id(@item)，以便日后可以参考

<li class="list-group-item" id="<%= dom_id(@item) %>">

然后你应该能够

$("#<%= dom_id(@item) %>").remove();

此外，这有点不好，因为您没有验证@item是否属于特定的@list

@list = List.find(params[:list_id])
@item = Item.find(params[:id])

这是更好的

@list = List.find(paramas[:list_id])
@item = @list.items.find(params[:id])

在此更改之前：

DELETE /lists/1/items/2

即使第2项不属于列表＃1，也能正常工作。

此更改后：

DELETE /lists/1/items/2

除非项目＃2属于列表＃1

，否则不将起作用

Answer 2

您可以使用这些html

行

<% @list.items.each do |item| %>
    <li id="item-<%= item.id %>" class="list-group-item">
    ....

所以你有每个项目的唯一标识符。不知道你为什么评论它。

然后在您的destroy.js.erb

中执行此操作

var item = $('li#item-' + <%= @item.id %>);
item.hide();
// or
item.remove();

您的控制器和服务器响应看起来很好。

Rails - 在销毁包含对象后删除li

2 个答案: