ruby-on-rails - Ruby on Rails 阻止 Turbolinks 劫持 AJAX 操作

Question

我正在按照 RoR 入门指南进行操作，并在进行过程中添加一些内容。具体来说，我想实现的是在步骤5.13 Deleting Articles ，我使用AJAX而不是使用标准模式删除了一篇文章。

我想以最适合 RoR 做事方式的方式来实现。看完Working with JavaScript in Rails章，以下步骤似乎是要走的路:

添加属性 remote: true到 link_to助手(参见代码片段 A)

禁用 turbolinks 这个 link_to helper 添加 data: {turbolinks: false} (参见代码片段 A)

向 Controller 添加一些逻辑，以确保返回 JSON(参见代码片段 B)。

添加监听 ajax:success 的 JavaScript事件，然后将项目设置为动画(参见代码片段 C)。

片段 A

<td><%= link_to 'Destroy', 
        article_path(article),
        method: :delete,
        data: {turbolinks: false, remote: true},
        :class=> 'remove-article' %></td>

片段 B

def destroy  
    @article = Article.find(params[:id])

    respond_to do |format|
      if @article.destroy
        format.html { redirect_to articles_path }
        format.json { render json: @article }
      else
        format.html { render action: "index" }
        format.json { render json: @article.errors, status: :unprocessable_entity }
      end
    end

end

代码段 C

(function(){
  $(document).on('turbolinks:load', listenForArticleDelete);

  function listenForArticleDelete() {
    $('a.remove-article').on('ajax:success', function(e, data, status, xhr) {
      // e.preventDefault();
      console.log('DELETE: AJAX SUCCESS', e, '\n', data, '\n', status, '\n', xhr);
    });
  }
})();

这并不像我预期的那样工作:

turbolinks 禁用不起作用:它仍在替换整个页面内容。

事件ajax:success事件被触发，但是当我检查该事件的数据属性时，我看到了一些奇怪的东西。这似乎是 Turbolinks 即将/刚刚完成的事情的文本表示(？!)。 Turbolinks.clearCache() Turbolinks.visit("http://localhost:3000/articles", {"action":"replace"})

我显然做错了。有人可以向我解释我应该怎么做吗？ IE。不仅如何让它工作，而且还以惯用的 RoR 方式工作？

编辑

我发现哪个部分是罪魁祸首:它是 片段 B 因为 format.html 在 format.json 之前运行。只需切换这两个即可解决问题:

修改后的片段 A:

<!-- Default delete -> format.html -->
<td><%= link_to 'Destroy default', 
        article_path(article),
        method: :delete,
        :class=> 'remove-article' %></td>
<!-- aSync delete -> format.json -->
<td><%= link_to 'Destroy aSync', 
        article_path(article),
        method: :delete,
        remote: true,
        data: {turbolinks: false},
        :class=> 'remove-article' %></td>

修改后的代码段 B:

def destroy  
    @article = Article.find(params[:id])

    respond_to do |format|
      if @article.destroy
        # Must place json before html, otherwise html will be executed
        format.json { render json: @article }
        format.html { redirect_to articles_path }
      else
        format.json { render json: @article.errors, status: :unprocessable_entity }
        format.html { render action: "index" }
      end
    end

end

Answer 1

我个人会以不同的方式来解决这个问题。

看法:
触发ajax调用删除文章

<td><%= link_to 'Destroy default', article, method: :delete, :remote => true, :class=> 'remove-article' %></td>

Controller :

def destroy
    @article.destroy
    respond_to do |format|
        format.js
    end
end

这将处理destroy方法并返回javascript，默认情况下这将返回相关目录中的destroy.js.erb文件

destroy.js.erb:

$("#article").slideToggle(300, function(){

    $("#article").remove();

});

仅供引用:http://api.jquery.com/slidetoggle/

希望这会有所帮助