Ruby on Rails 7动作电缆

Question

我已经从6号铁路升级到7，现在我的动作电缆频道已经不再听了。我敢肯定这是一个愚蠢的错误，但是对于我的一生，我无法追踪它。

app/javascript/channels/consumer.js

import { createConsumer } from "@rails/actioncable"

export default createConsumer()

app/javascript/channels/settings_channel.js

import consumer from "./consumer"

consumer.subscriptions.create({ channel: "SettingsChannel" })

document.addEventListener('turbo:load', () => {
  //console.log(attendance_id);
  
  consumer.subscriptions.create({ channel: "SettingsChannel"}, {
    connected() {
      console.log("connected to settings channel ");
    },

    disconnected() {
      // Called when the subscription has been terminated by the server
    },

    received(data) {
      console.log("settings channel data:");
      console.log(data);

      if(data.tab){
        //clear other selected tabs first then highlight selected ones.

        const actions_tab = document.getElementById('actions-tab');
        if(actions_tab){
          actions_tab.classList.remove('settings-active-tab','settings-inactive-tab');
          if(data.tab == 'actions'){
            actions_tab.classList.add('settings-active-tab');
          }else{
            actions_tab.classList.add('settings-inactive-tab');
          }
        }
        const committees_tab = document.getElementById('committees-tab');
        if(committees_tab){
          committees_tab.classList.remove('settings-active-tab','settings-inactive-tab');
          if(data.tab == 'committees'){
            committees_tab.classList.add('settings-active-tab');
          }else{
            committees_tab.classList.add('settings-inactive-tab');
          }
        }
        const members_tab = document.getElementById('members-tab');
        if(members_tab){
          members_tab.classList.remove('settings-active-tab','settings-inactive-tab');
          if(data.tab == 'members'){
            members_tab.classList.add('settings-active-tab');
          }else{
            members_tab.classList.add('settings-inactive-tab');
          }
        }
        const motions_tab = document.getElementById('motions-tab');
        if(motions_tab){
          motions_tab.classList.remove('settings-active-tab','settings-inactive-tab');
          if(data.tab == 'motions'){
            motions_tab.classList.add('settings-active-tab');
          }else{
            motions_tab.classList.add('settings-inactive-tab');
          }
        }
        const session_tab = document.getElementById('session-tab');
        if(session_tab){
          session_tab.classList.remove('settings-active-tab','settings-inactive-tab');
          if(data.tab == 'session'){
            session_tab.classList.add('settings-active-tab');
          }else{
            session_tab.classList.add('settings-inactive-tab');
          }
        }
        const system_tab = document.getElementById('system-tab');
        if(system_tab){
          system_tab.classList.remove('settings-active-tab','settings-inactive-tab');
          if(data.tab == 'system'){
            system_tab.classList.add('settings-active-tab');
          }else{
            system_tab.classList.add('settings-inactive-tab');
          }
        }
      }

//end of inserted code for data received
    }
  });

})

app/javacript/application.js

import "@hotwired/turbo-rails"
//below is not supported yet
//import "@hotwired/stimulus-importmap-autoloader"
import "./controllers"
import "@rails/actioncable"   
import "@rails/activestorage" 
import "./channels"

import Rails from "@rails/ujs"
window.Rails = Rails;
if(Rails.fire(document, "rails:attachBindings")){
  Rails.start();
}

app/config/importmap.rb

# Pin npm packages by running ./bin/importmap

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
#pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
# Use libraries available via the asset pipeline (locally or via gems). # Rails 7.0 required
pin "@rails/actioncable", to: "actioncable.esm.js"      
pin "@rails/activestorage", to: "activestorage.esm.js" 

提前感谢您的任何建议！我在Rails 6中的Turbolinks很好地工作了： - /

Answer 1

解决了！

我的问题是在频道/index.js中，

默认情况下，Rails 7船在Channels/Index.js中使用以下代码。

const channels = require.context('.', true, /_channel\.js$/)
channels.keys().forEach(channels)

此代码旨在自动导入所有 *_CHANNEL.JS文件。问题是刺激（对于频道和控制器）中不支持这一点...请参阅此线程： https://github.com/hotwired/stimulus-rails/issues/73

因此，我的解决方案是手动加载它们，直到支持自动加载为止。

这是频道/index.js中的新代码：

import "./settings_channel"
import "./vote_channel"
import "./member_vote_channel"
import "./attendance_channel"