当使用ActionCable通道时，ActionController::RoutingError (没有路由匹配[POST]“/blog/my-blog-post-1”)

Question

这是我作为代码的一部分开始开发的一个应用程序，它是由DevCamp开发的，虽然它很好地帮助我更好地理解了Rails 5，但它在某些地方有点过时，我在调试自它发布以来发生了变化的东西时遇到了一些非常有趣的事情。

我正在尝试建立一个通过ActionCable连接评论的博客，这样它们就可以在不刷新页面的情况下实时更新。当我发布它们时，我收到一个错误，当然，页面没有按照我想要的方式更新。

ActionController::RoutingError (No route matches [POST] "/blogs/my-blog-post-1")

以下是我所知道的为实现这一点所做的更改。我对Ruby和Rails相当熟悉，但我对Javascript和它的库还是个新手。如果您能提供任何帮助，我们将不胜感激(view github repo branch here)

routes.rb

Rails.application.routes.draw do
  devise_for :users, path: '', path_names: { sign_in: 'login', sign_out: 'logout', sign_up: 'register' }
  resources :folios, except: [:show] do
    put :sort, on: :collection
  end

  get 'folio/:id', to: 'folios#show', as: 'folio_show'

  get 'about-me', to: 'pages#about'
  get 'contact', to: 'pages#contact'

  resources :blogs do
    member do
      get :toggle_status
    end
  end

  mount ActionCable.server => '/cable'

  root to: 'pages#home'
end

博客频道

class BlogsChannel < ApplicationCable::Channel
  def subscribed
    stream_from "blogs_#{params['blog_id']}_channel"
  end

  def unsubscribed
  end

  def send_comment(data)
    current_user.comments.create!(content: data['comment'], blog_id: data['blog_id'])
  end
end

connection.rb

module ApplicationCable
  class Connection < ActionCable::Connection::Base
    identified_by :current_user

    def guest_user
      guest = GuestUser.new
      guest.id = guest.object_id
      guest.name = "Guest User"
      guest.first_name = "Guest"
      guest.last_name = "User"
      guest.email = 'guest@guestuser.com'
      guest = GuestUser.new
      guest = GuestUser.new
      guest = GuestUser.new
      guest = GuestUser.new
      guest
    end

    def connect
      self.current_user = find_verified_user || guest_user
      logger.add_tags 'ActionCable', current_user.email
      logger.add_tags 'ActionCable', current_user.id
    end

    protected

    def find_verified_user
      if verified_user = env['warden'].user
        verified_user
      end
    end

  end
end

blogs.coffee (现在位于正确的文件目录中)

jQuery(document).on 'turbolinks:load', ->
  comments = $('#comments')
  if comments.length > 0
    App.global_chat = App.cable.subscriptions.create {
      channel: "BlogsChannel"
      blog_id: comments.data('blog-id')
    },
    connected: ->
    disconnected: ->
    received: (data) ->
      comments.append data['comment']
    send_comment: (comment, blog_id) ->
      @perform 'send_comment', comment: comment, blog_id: blog_id
  $('#new_comment').on 'ajax:before', (e) ->
    $this = $(this)
    textarea = $this.find('#comment_content')
    if $.trim(textarea.val()).length > 1
      App.global_chat.send_comment textarea.val(),
      comments.data('blog-id')
      textarea.val('')
    e.preventDefault()
    return false

从coffeescript编译JS

var comments;

comments = $('#comments');

if (comments.length > 0) {
  App.global_chat = App.cable.subscriptions.create({
    channel: "BlogsChannel",
    blog_id: comments.data('blog-id')
  }, {
    connected: function() {},
    disconnected: function() {},
    received: function(data) {
      return comments.append(data['comment']);
    },
    send_comment: function(comment, blog_id) {
      return this.perform('send_comment', {
        comment: comment,
        blog_id: blog_id
      });
    }
  });
}

$('#new_comment').on('ajax:before', function(e) {
  var $this, textarea;
  $this = $(this);
  textarea = $this.find('#comment_content');
  if ($.trim(textarea.val()).length > 1) {
    App.global_chat.send_comment(textarea.val(), comments.data('blog-id'));
    textarea.val('');
  }
  e.preventDefault();
  return false;
});

Answer 1

看起来您正在尝试停止表单提交，但您并没有按照使用rails form_with助手时支持的方式进行提交，默认情况下，它会呈现一个远程表单，因此您需要停止rails特殊事件。

查看有关如何停止rails‘remote event https://guides.rubyonrails.org/working_with_javascript_in_rails.html#stoppable-events的指南

您需要侦听ajax:before事件，而不是submit事件。

因此，使用$('#new_comment').on 'ajax:before', (e) ...更改$('#new_comment').submit (e) ...