Rails 破坏 js.erb

Question

你能告诉我，我怎样才能在销毁方法结束之前删除对象。当我使用下一个模式时，删除照片时会删除对象，但需要 1 或 3 秒或更长时间。

_form(编辑动作)

<% listing.photos.each do |photo|%>
    <%= image_tag photo.image.thumb, class: 'thumbnail', id: "test"%>
    <%= link_to "remove", photo_path(photo),class: 'btn btn-primary', method: :delete, data: { confirm: 'Are you sure?' }, remote: true %>

destroy.js.erb

$('#test').remove();

我如何使用这种模式

_form:

<div id="test_<%= photo.id %>">
  <%= image_tag photo.image.thumb, class: 'thumbnail'%>
  <%= link_to "remove", photo_path(photo),class: 'btn btn-primary', method: :delete, data: { confirm: 'Are you sure?' }, remote: true %>

销毁.js.erb：

 $('#edit_image_<%= @photo.id %>').remove();

Answer 1

如果您想在图像在服务器上真正销毁之前从 DOM 中删除图像以避免延迟，您可以在单击“删除”按钮时应用event.preventDefault()。 这将允许您重写“删除”按钮的正常行为。 看看this example关于在原始事件之前执行一些UI动作然后触发它。

另外请注意，从 UI 中删除某些内容而不确保它已被普遍删除并不是一个好主意。对用户来说还不够清楚。因此，也许最好先隐藏图像，以防在销毁图像时出现服务器错误，您将再次显示它并显示一些指导性消息。

UPD

考虑以下标记

<div id="test_<%= photo.id %>">
  <%= image_tag photo.image.thumb, class: 'thumbnail' %>
  <%= link_to "remove", "#", class: 'remove btn btn-primary', data: { id: photo.id, url: photo_path(photo) } %>
</div>

另一种选择是用单独的jQuery.ajax() 调用重写remote: true。

$('.btn.remove').click(function () {
  var $target = $(this).parents('#test_' + $(this).data('id'));

  $.ajax({
    url: $(this).data('url'),
    method: 'DELETE',
    beforeSend: function() {
      $target.hide() # hiding corresponding image
    },
    error: function () {
      $target.show() # revert hiding on error
      console.log("Sorry! Couldn't remove image.") # log message
    }
  })
})

Answer 2

没有js.erb 模板有一种更简洁的方法：

<div class="photo">
  <%= image_tag photo.image.thumb, class: 'thumbnail'%>
  <%= link_to "remove", photo_path(photo),class: 'destroy btn btn-primary', method: :delete, data: { remote: true, type: 'json', confirm: 'Are you sure?' } %>
<div>

现在只需设置一个 ajax 处理程序：

// app/assets/javascripts/photos.js
$(document).on('ajax:success', '.photo .destroy.btn', function(){
  $(this).parent('.photo').remove();
});

并设置您的控制器返回正确的响应代码。

class PhotosController
  def destroy
    @photo = Photo.find(params[:id])
    @photo.destroy!

    respond_to do |format|
      format.json do
        head :no_content
      end
    end
  end
end

这会将您的客户端逻辑保留在app/assets/javascripts 中，可以在其中缓存和缩小它，而不是将其分散在一堆美化的脚本标签中。