Fatal编程技术网
  • javascript/
  • 使用RubyonRails6管理JavaScript的最佳方法是什么？

使用RubyonRails6管理JavaScript的最佳方法是什么？

javascript jquery ruby-on-rails webpack

使用RubyonRails6管理JavaScript的最佳方法是什么？,javascript,jquery,ruby-on-rails,webpack,ruby-on-rails-6,Javascript,Jquery,Ruby On Rails,Webpack,Ruby On Rails 6,我正在尝试ROR6（我来自MEAN，我还没有接触过版本3中的RoR），我发现了一些问题，无法找到管理JavaScript代码的最佳方法。也许是因为我的背景 我读了很多关于这个话题的书（包括官方指南），但官方文件似乎已经过时了 根据文档，当您从cli生成控制器时，它应该为该控制器创建一个.js文件，但不会发生。此外，现在Webpack已经添加到RoR 6中，JavaScript不再由资产管道管理（我说的对吗？），但没有提及这一点 我想找到一种为每个视图编写代码JS的方法，并将代码与其他视图隔离开来

我正在尝试ROR6（我来自MEAN，我还没有接触过版本3中的RoR），我发现了一些问题，无法找到管理JavaScript代码的最佳方法。也许是因为我的背景

我读了很多关于这个话题的书（包括官方指南），但官方文件似乎已经过时了

根据文档，当您从cli生成控制器时，它应该为该控制器创建一个.js文件，但不会发生。此外，现在Webpack已经添加到RoR 6中，JavaScript不再由资产管道管理（我说的对吗？），但没有提及这一点

我想找到一种为每个视图编写代码JS的方法，并将代码与其他视图隔离开来

  • 我应该把所有的JS代码放在哪里
  • 如何为每个视图的JS代码获得隔离
  • 由于Bootstrap（使用Thread），我已将jQuery添加到项目中，并以这种方式将其添加到网页包中，但$or jQuery未定义：
我非常感谢你的帮助

谢谢

解决方案：

我找到了我要找的-->

Basecamp创建的Stimulusjs为每个HTML视图添加了一个JS层，让我们在编写JS代码时保持有序和清晰。它将JS文件与DOM连接起来，仅此而已。足够添加一些JS来改进功能

它与TurboLink完美搭配，可与Webpack一起使用。此外，它可以在10分钟内学会（不再）。安装也非常简单

无论如何，如果您需要了解RoR和Webpack/Webpack的相关知识，您可以访问以下链接：

最后，如果您不想在RoR下使用类似于Stimulus的JS框架来管理JS代码，您可以针对特定的JS页面尝试以下几点：

  • 帕洛玛宝石：（未选中）
  • 页面脚本gem：（未选中）
      • 对Webpack的更改非常新，文档还没有跟上进度

      在运行生成器时生成资产文件只使用旧的资产管道，即使这样也不是一个好主意。它依赖于Sprockets-special
      require\u-tree
      指令，该指令将清除目录中的所有文件并将它们添加到清单中。按字母顺序，所以你无法控制执行的顺序

      它还愚弄了初学者，让他们认为他们放在
      users.js
      中的js只在他们的用户控制器中执行，而事实上，它只是在一个单独的清单中执行

      使用Webpack，您可以显式导入资产

      我应该把所有的JS代码放在哪里？ 我们鼓励您将实际应用程序逻辑放在
      app/javascript
      中的相关结构中

      如何为每个视图的JS代码获得隔离？ 虽然您可以在视图本身中使用
      javascript\u pack\u tag
      来要求特定的文件，但这并不是一个好习惯用法，因为它会创建不必要的HTTP请求和难以遵循的逻辑

      如果要确保在加载特定视图时执行代码，可以将数据属性添加到body标记并创建特殊事件：

      # app/layouts/application.html.erb
<body data-action="<%= action_name >" data-controller="<%= controller_name %>">
      然后，您可以通过侦听自定义事件来包装在加载特殊页面时应该发生的功能

      $(document).on('myns:users#show', ()=>{
  console.log("We are on users#show");
});
      我将忽略你的jquery问题，因为这已经回答了2个问题，并且在其他地方得到了回答。谢谢你的回答。它向我阐明了一些重要的概念。jQuery已经开始工作了，我已经尝试了您的解决方案，只在加载特定视图时运行代码，但我肯定遗漏了什么。我将触发器代码放在index.js中，它在app/javascript下的application.js中引用。这个index.js被认为触发了事件，我可以在控制台中确认事件的名称（kigen:registrations#new）。我在new.js中有监听器，它在application.js中也被引用，在索引之后，它不会打印任何内容。我必须测试它。这是从我很久以前写的一本珍宝的记忆中快速而草率地重写的，它包装了这个成语。没问题，我去看看。谢谢你的帮助！啊我发现了问题。事件为
      turbolinks:load
      非
      turbolinks:change
      。 
      // fired when turbolinks changes pages.
$(document).on('turbolinks:load', ()=>{
  let data = $(body).data();
  // replace myns with whatever you want
  $(this).trigger(`myns:${data.controller}`, data)
         .trigger(`myns:${data.controller}#${data.action}`, data)
         .trigger(`myns:#${data.action}`, data)
});

      $(document).on('myns:users#show', ()=>{
  console.log("We are on users#show");
});