format.js 仅在我 *Hardcode* JS 视图时才有效答案

【问题标题】：format.js Only Works if I *Hardcode* the JS Viewformat.js 仅在我 *Hardcode* JS 视图时才有效
【发布时间】：2019-12-19 07:22:06
【问题描述】：

这很好用：

class CommentsController < ApplicationController
  def destroy
    respond_to do |format|
      format.js { render "destory.js.erb" }
    end
  end
end

这根本不工作（JavaScript 永远不会触发）：

class CommentsController < ApplicationController
  def destroy
    respond_to do |format|
      format.js
    end
  end
end

这是预期的吗？

我认为 Rails 应该自动知道使用 /comments/destroy.js.erb 视图？我总是必须明确定义 JavaScript 视图吗？

【问题讨论】：

这应该没有必要。 “不起作用”是什么意思？它会产生错误吗？它是否显示其他视图？
@tadman：“不起作用”是指 JavaScript 永远不会触发（视图只包含基本的alert()）。当我查看 Rails 日志时，我可以看到 Rails 正在尝试呈现 HTML 视图（不是 JS 视图）：Rendering comments/destroy.html.erb Rendered comments/destroy.html.erb (0.6ms).
返回 JavaScript 在应用程序设计方面有点不寻常，通常最好返回像 JSON 这样的数据，然后客户端 JavaScript 可以对其进行操作，但这原则上应该可行。问题可能是您的客户端没有明确要求 JavaScript，而是通过 Accepts 标头要求 HTML。这不是 AJAX 要求 JSON 的情况。
你是怎么做的，因为如果你想加载 js 页面，你必须请求comments/destroy.js，这通常是一个删除请求。 comments/destroy 将默认为 html。路由将是DELETE comments/destroy(.format)，其中(.format) 是您请求的可选格式（默认为html），这是respond_to 确定如何响应的方式
@tadman。谢谢！这一切都非常有帮助。我谷歌了一下，我想我找到了一个解释你在这里建议的教程：engineyard.com/blog/ajax-on-rails-with-unobtrusive-javascript这听起来像理想的方法吗？

标签： ruby-on-rails

【解决方案1】：

感谢@tadman，我最终从完全不同的角度解决了这个问题，现在我的问题得到了解决。

正如this excellent Engine Yard tutorial 中所述，我完全放弃了respond_to 和format.js 方法。我现在转而使用 Rails 核心团队显然更喜欢的 AJAX 方法——即：

我的观点：

<p data-js-comment-id=<%= c.id %> class="blank_links" style="margin-top:-12px;">
  <%= c.body %>
  <%= link_to blog_post_comment_path(@blog_post,c), remote: true, method: :delete, 
  data: { confirm: "Are you sure?" } do %>
    <%= fa_icon "trash" %>
  <% end %> 
</p>

我的控制器：

class CommentsController < ApplicationController
  def destroy    
    @blog_post = BlogPost.find(params[:blog_post_id])
    @comment = Comment.find(params[:id])
    @comment.delete
    render json: @comment
  end
end

我的/app/assets/javascripts/blog_posts.js 文件（因为我不使用CoffeeScript，所以我从原来的/app/assets/javascripts/blog_posts.coffee 重命名）：

$(document).on('turbolinks:load', function() {
  $("[data-js-comment-id]").on("ajax:success", function(event, data, status, xhr){
    var comment_id = xhr.responseJSON.id;
    $( "#comment-" + comment_id ).fadeOut(650);
    get_default_success_toastr("Comment deleted!", "And just like that, pffft. It's gone!");
  });
});

注意$(document).on('turbolinks:load', function() { 行上方。这很重要，as noted here 和 here。

最后，我的application.js 文件：

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require activestorage
//= require_tree .
//= require popper
//= require bootstrap-sprockets
//= require toastr

我在上面包含 application.js 文件的原因是：(a) 您需要库的顺序似乎有所不同，并且 (b) 注意到我 删除了 @ 987654335@

完美运行！

【讨论】：