Question

在rails上，我将所有JavaScript文件放入应用程序js文件中。

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

//VENDOR JS BEGINS
//= require pace/pace.min
//= 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

然后我在application.html.erb的头部调用javascript作为;

...
<head>
..
<%= javascript_include_tag 'application' %>    
..
</head>
...

然后我检查网站的速度，我建议把这个JS调用到body。我知道我应该BTW。但问题在于页面特定的JS代码。

想象一下，我有home.html.erb用户选择日期。所以我将datapicker代码放入此页面。

如果我将<%= javascript_include_tag 'application' %>带到身体的底部，这次是因为jquery＆amp; datepicker尚未加载，因此页面特定的JS提供no method error

最好的方法是什么？

Answer 1

在正文关闭代码之前和<%= javascript_include_tag 'application' %>之后

添加<%= yield :page_scripts %>

然后在特定视图中的任何位置（通常在顶部）设置脚本：

<% content_for :page_scripts do %>
  <script>alert( "My nice scripts..." );</script>
<% end %>

Answer 2

http://brandonhilkert.com/blog/page-specific-javascript-in-rails/有一个非常好的答案。

基本上，您要打开app / views / layouts / application.html.erb并说服它在每次呈现页面时为您提供控制器和视图信息。为此，您可以从

更改正文标记

<body> 
  <%= yield %>
</body

到

<body class="<%= controller_name %> <%= action_name %>">
  <%= yield %>
</body>

因此，当rails渲染body标签时，它将为控制器和控制器中的一个动作添加一个类。

假设你有一个名为static_pages的控制器，而static_pages控制器有

def home 
end

当rails渲染视图/页面时，它现在将向body标签添加一类 static_pages 和一类 home 。

<body class="static_pages home">
    the home view is rendered here
</body>

这将是网站范围的更改，因此，如果您从用户控制器转到索引页面/视图，则正文标记将为：

<body class="users index">
    the index view is rendered here
</body>

现在，创建一个名为vendor / assets / javascripts / jquery-readyselector.js的文件，其中包含：

(function ($) {
  var ready = $.fn.ready;
  $.fn.ready = function (fn) {
    if (this.context === undefined) {
      // The $().ready(fn) case.
      ready(fn);
    } else if (this.selector) {
      ready($.proxy(function(){
        $(this.selector, this.context).each(fn);
      }, this));
    } else {
      ready($.proxy(function(){
        $(this).each(fn);
      }, this));
    }
  }
})(jQuery);

必须在application.js

中正确引用该文件

...
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery-readyselector
//= require_tree .

完成所有操作后，您可以通过针对您想要测试的视图进行特定警报来测试它，如下所示：

// app/assets/javascripts/static_pages_home.js

$(".static_pages.home").ready(function() {
  return alert("You should only see this on the static pages home page.");
});


// app/assets/javascripts/user_index.js

$(".users.index").ready(function() {
  return alert("You should only see this on the users index page.");
});

您还可以通过不引用操作来使脚本控制器具体化。

$(".users").ready(function() {
  return alert("You should only see this on a users controller controlled page.");
});

Answer 3

您还可以查看Page-specific Javascript for Rails done right。这值得一看！

Installation

安装后。我们来看看示例代码。

var ArticlesController = Paloma.controller('Articles');

ArticlesController.prototype.edit = function(){
  // Handle edit article
};

这意味着如果您有文章控制器的编辑操作页面。然后只会触发javascript。这不会在其他控制器操作中触发。

Rails js文件＆amp;页面特定的js

3 个答案: