在Rails 4.0.1中添加页面特定的JS

时间:2014-06-09 15:41:50

标签: javascript ruby-on-rails asset-pipeline

我正在尝试在我的application.js.coffee清单文件中执行类似的操作

#= require jquery.min
#= require jquery.turbolinks
#= require jquery_ujs
#= require private_pub
#= require turbolinks
#= require ckeditor/init
#= require bootstrap


$ ->
  if $('body').hasClass 'page'
    #= require jquery.parallax-1.1.3
    #= require jquery.scrollTo.min
    #= require jquery.easing.1.3
    #= require waypoints.min
    #= require jquery.mousewheel
    #= require jpreLoader
    #= require custom
    #= require maps
    #= require jquery.flexisel

  else
    #= require jquery.slimscroll.min
    #= require morris
    #= require lanceng
    #= require editable/bootstrap-editable
    #= require editable/rails
    #= require jquery.countdown

这不正确吗?我想添加页面特定的JS,我确信我已经在body类中添加了<%= controller_name %>,这是我用于页面特定CSS的方法。

但是,在我的来源中,我只能看到以下内容:

<!-- Javascript  -->

<script data-turbolinks-track="true" src="/assets/jquery.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/private_pub.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/ckeditor/init.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/ckeditor/ckeditor.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>

这种方法不正确吗?如果没有那么这样做的方法是什么?

2 个答案:

答案 0 :(得分:3)

#= require语句是在代码在页面上运行之前在服务器端运行的预处理器,因此即使jQuery ready $ ->函数也不起作用,这就是为什么你没有看到任何要求包含在页面上。

我将不得不在这里停下来,只是说让Rails资产管道连接并将你的javascript资产缩小为一个文件并一次性提供它们比让每个页面加载不同的javascript要好得多文件。原因是用户下载1个大文件并对其进行缓存比向每个请求下载多个文件更好。在移动平台上尤其如此。我强烈建议您重新考虑您的策略。

进一步阅读:

答案 1 :(得分:1)

不幸的是,您看到的问题是因为清单(require语句)是在服务器端进行评估的。因此,您的javascript if语句不会过滤或阻止加载任何内容,因为此时已经加载了目标JS文件。实际上,如果你在浏览器中查看渲染的application.js,你可能会看到一个空的if块。

有几种方法可以做到这一点(我很清楚)。如果您查看Rails资产管道指南Controller-Specific Assets,它建议:

  

...包括控制器特定的样式表和   JavaScript文件只能在各自的控制器中使用   以下内容:

<%= javascript_include_tag params[:controller] %> 
or 
<%= stylesheet_link_tag params[:controller] %>
     

执行此操作时,请确保您未使用require_tree指令,   因为这会导致您的资产不止一次被包含在内。

此外,一位同事一直在使用名为Paloma的宝石来实现此目的。我自己没有使用它,所以我不能给你直接的建议或例子,但是我提到它是因为它似乎有助于简化不仅是控制器特定的资源加载,还有特定于行动的资产。