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

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

我想以最符合RoR做事方式的方式这样做.阅读Working with JavaScript in Rails章后,以下步骤似乎是要走的路：

>将属性remote：true添加到link_to帮助程序(请参阅代码段A)
>通过添加数据禁用turbolinks this link_to helper：{turbolinks：false}(参见代码片段A)
>向控制器添加一些逻辑,确保返回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',xhr);
    });
  }
})();

这不像我预期的那样工作：

> turbolinks禁用无效：它仍在替换整页内容.
>事件ajax：成功事件被触发但是当我检查该事件的data属性时,我看到了一些奇怪的东西.它似乎是Turbolinks即将完成的工作的文字表示(？！). Turbolinks.clearCache()
Turbolinks.visit(“http：// localhost：3000 / articles”,{“action”：“replace”})

我显然是这样做错了.有人可以向我解释我应该怎么做吗？即不只是如何让它工作,而且还以一种惯用的RoR方式？

编辑

我发现哪个部分是罪魁祸首：它是Snippet B,因为format.html是在format.json之前运行的.只需切换这两个就解决了这个问题：

修订后的片段A：

<!-- Default delete -> format.html -->
<td><%= link_to 'Destroy default',:class=> 'remove-article' %></td>
<!-- aSync delete -> format.json -->
<td><%= link_to 'Destroy aSync',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

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

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

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

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

});