Rails资产管道-只向head添加jquery
Rails asset pipeline - add only jquery to head
我有几个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 %>
问题是,我里面有几个js代码。。html.erb文件,需要首先加载页面。但我想将它们合并到一个js文件中。我想做的是在head标记中只调用jquery,并在body中调用应用程序js文件。但是,如果我删除jquerygem并将其称为;
<%= javascript_include_tag 'jquery.min', 'data-turbolinks-track' => true %>
Rails给出了一个关于jquery_ujs的错误。当然,我也可以在那里添加jquery_ujs。但最好的做法是什么?
将页面特定的js代码添加到rails应用程序中(从而避免在一个页面中只需要库或脚本时在每个页面中加载js)的最rails方式是在关闭body标记之前将其添加到layouts/application.html.erb文件的最底部:
<%= yield :javascript %>
</body>
</html>
然后,在您希望运行一些javascript片段的视图中,您应该在关闭所有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都这样做,而且维护/调试非常容易。
相关文章:
- 正在添加'X'按钮,在文本字段旁边使用javascript
- 如何在映射数组中添加换行符
- 正在将数据主题添加到所有项目
- ZeroClipboard-在复制之前添加到值
- 我可以在json对象中添加一个函数吗
- 将输入字段中的文本提交到我的数据库,同时将其添加到我的列表中
- Rails资产管道-只向head添加jquery
- 如何将 CSS 样式动态添加到 HEAD 标记
- 如何在 JavaScript 中的 HTML head 标记中动态添加脚本值
- 使用 jQuery 将 CSS 添加到正文中的 head 标签
- 在 head 标签中动态添加
- 动态地将css文件添加到head(IE中的优先级颠倒)
- Javascript添加到head,但无法使用它
- 在Joomla head上添加JS
- 如何使用jquery/javascript读取head中动态添加的脚本标记中的值
- 如何在cmsms的head中添加javascript
- 当脚本src添加到head时,不会调用jQuery函数
- 在Iframe父head元素上添加meta标记
- 在IE8中使用JavaScript在元标记之后直接向HEAD添加CSS链接
- jQuery追加不起作用(将css添加到head)