Rails 资产管道 - 仅将 jquery 添加到头部

Question

我有几个 js 文件，我将它们放入 vendor/assets/js。然后我在应用程序 js 文件中要求它们为；

//= require jquery
//= require jquery_ujs
//= require dropzone
//= require jquery.cookie
//= require toastr

//VENDOR JS BEGINS
//= require pace/pace.min
//JQuery buraya gelecek sonra
//= require modernizr.custom
//= require jquery-ui/jquery-ui.min
//= require boostrapv3/js/bootstrap.min
//= require jquery/jquery-easy
//= require jquery-unveil/jquery.unveil.min
//= require jquery-bez/jquery.bez.min
//= require jquery-ios-list/jquery.ioslist.min
//= require jquery-actual/jquery.actual.min
//= require jquery-scrollbar/jquery.scrollbar.min
//= require bootstrap-select2/select2.min
//= require switchery/js/switchery.min
//= require imagesloaded/imagesloaded.pkgd.min
//= require jquery-isotope/isotope.pkgd.min
//= require classie/classie
//= require codrops-stepsform/js/stepsForm
//= require bootstrap-datepicker/js/bootstrap-datepicker
//= require bootstrap-datepicker/js/locales/bootstrap-datepicker.tr.js
//= require bootstrap-datepicker/js/locales/bootstrap-datepicker.en.js
//= require summernote/js/summernote.min
//= require moment/moment-with-locales.min
//= require bootstrap-daterangepicker/daterangepicker
//= require bootstrap-timepicker/bootstrap-timepicker.min
//= require codrops-dialogFx/dialogFx
//= require ion-slider/ion.rangeSlider.min
//= require owl-carousel/owl.carousel.min
//VENDOR JS ENDS

在页面顶部我需要 jquery 并且 jquery_ujs 属于 jquery。现在，我将应用程序 js 文件加载为；

<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>    

问题是，我在 ..html.erb 文件中有几个 js 代码，需要先加载页面。但我想将它们合并到一个 js 文件中。我想做的是在 head 标签中只调用 jquery 并在 body 中调用应用程序 js 文件。但是，如果我删除 jquery gem 并将其称为;

<%= javascript_include_tag 'jquery.min', 'data-turbolinks-track' => true %>    

Rails 给出关于 jquery_ujs 的错误。当然我也可以在那里添加 jquery_ujs 。但是最好的做法是什么？

Answer 1

将特定于页面的 js 代码添加到您的 rails 应用程序的最典型的方式是添加到布局的最底部/ application.html.erb 文件就在结束 body 标记之前：

    <%= yield :javascript %>

  </body>
</html>

然后，鉴于您希望运行一些 javascript 的 sn-ps，您应该在关闭所有 html 标记后将其放在它的最底部。确保它不在该视图中的某些 div 或任何内容中，而是在它的最底部。

更新引用 Fred：

<%= content_for :javascript do %>
  <script type="text/javascript">
   $(document).on('page:load', function() {
       all your code here..
     });
  </script>
<% end %>

此代码现在将生成到布局视图的底部，仅加载到您需要的特定视图上，而不是与 assets/js 文件夹中的所有其他资产一起连接。我对所有非应用范围的自定义 js 执行此操作，并且非常易于维护/调试。