如何 运行 来自 Rails 7 的单文件 javascript 音板应用程序

Question

我有一个来自 App Academy 的单文件 Javascript 音板应用程序。代码工作正常，但我如何将它“连接”到 Rails 7 服务器？我正在努力弥合前端 javascript 和后端 Rails.

之间的理解

如果我将内容粘贴到 app/javascript/application.js 中，它就会运行，但我想将其保留在一个单独的文件中：'app/javascript/soundboard/soundboard.js'

我从一个新的 Rails 7 项目开始 $ rails new soundboard

我添加到 /config/importmap.rb: pin_all_from "app/javascript/soundboard", under: "soundboard"

我添加到app/javascript/application.js： import "soundboard"

我的app/javascript/soundboard/soundboard.js:

const sounds = [
    'camera',
    'ding',
    'logout',
    'noise',
    'phone',
    'pop'
];

sounds.forEach((sound) => {
    const btn = document.createElement('button');
    btn.classList.add('btn');

    btn.innerText = sound;
  
    btn.addEventListener('click', ()=>{
        stopSongs();
        document.getElementById(sound).play();
    });
    
    document.getElementById('buttons').appendChild(btn);
});


function stopSongs(){
    sounds.forEach(sound =>{
        const song = document.getElementById(sound);

        song.pause();
        song.currentTime = 0;
    });
}

我需要添加一些东西到 app/javascript/soundboard/soundboard.js 类似于：module.exports=Soundboard

Answer 1

我想出了折衷方案。

不要将文件放在自己的目录中，而是将其放入默认目录“app/javascript/controllers” 将其从 soundboard.js 重命名为 soundboard_controller.js
它的完整路径应该是 app/javascript/controllers/soundboard_controller.js

更新 HTML 视图的使用位置。
<div id="buttons" data-controller="soundboard"></div>
（添加值等于文件名的“data-controller”元素，不包括“_controller.js”）。

无需修改文件：
config/importmap.rb
app/javascript/application.js