如何从Rails 7运行单文件JavaScript音板应用7
我有一个来自App Academy的单文件JavaScript音板应用程序。该代码工作正常，但是如何将其“将”“连接”到Rails 7服务器中？我正在努力弥合前端JavaScript和后端导轨之间的理解。
如果我将内容粘贴到app/javascript/application.js，但我想保留一个单独的文件：'app/javascript/soundboard/soundboard.js'
我是从一个新的Rails 7项目开始的， 它将运行。 $ rails新音板
我添加到/config/importmap.rb： pin_all_from“ app/javascript/soundboard”，下：“ soundboard”
我添加到app/javascript/application.js： 导入“ Soundboard”
我的应用/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;
});
}
我需要在应用程序/JavaScript/Soundboard/Soundboard.js添加一些东西 类似：module.exports = Soundboard
I have a single-file Javascript soundboard application from app academy. The code works fine, but how do I "wire" it into the Rails 7 server? I'm struggling to bridge my understanding between frontend javascript and backend Rails.
It runs if I paste the contents into app/javascript/application.js but I want to keep it a separate file: 'app/javascript/soundboard/soundboard.js'
I am starting from a new Rails 7 project$ rails new soundboard
I added to /config/importmap.rb:pin_all_from "app/javascript/soundboard", under: "soundboard"
I added to app/javascript/application.js:import "soundboard"
My 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;
});
}
Do I need to add something to app/javascript/soundboard/soundboard.js
Something like: module.exports=Soundboard
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我已经弄清楚了一个妥协。
将其放在默认目录“ app/javascript/Controller”中，而不是坐在其自己的目录中
它的完整路径应为app/javascript/controllers/soundboard_controller.js
更新将使用的html视图。
＆lt; div ID =“按钮” data-controller =“ soundboard”＆gt;＆lt;/div＆gt;（添加具有等于文件名称的值的“数据控制器”元素，不包括“ _controller.js”）。
无需修改文件：
config/importmap.rb
app/javascript/application.js
I have figured out a compromise.
Instead of the file sitting in its own directory, place it into the default directory "app/javascript/controllers" Rename it from soundboard.js to soundboard_controller.js
Its full path should be app/javascript/controllers/soundboard_controller.js
Update the HTML view where it will be used.
<div id="buttons" data-controller="soundboard"></div>(Add the "data-controller" element with a value equal to the name of the file, excluding "_controller.js").
There's no need to modify the files:
config/importmap.rb
app/javascript/application.js