Rails js 文件和页面特定的 js答案

【问题标题】：Rails js files & Page specific jsRails js 文件和页面特定的 js
【发布时间】：2017-05-05 09:58:30
【问题描述】：

在 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。我知道我应该顺便说一句。但问题在于页面特定的 JS 代码。

想象一下，我有home.html.erb，用户可以在其中选择日期。所以我把datapicker代码放到这个页面中。

如果我将<%= javascript_include_tag 'application' %> 放入正文底部，这一次是因为 jquery 和 datepicker 尚未加载，所以页面特定的 JS 给出了no method error

最好的方法是什么？

【问题讨论】：

我猜你没有使用 turbolinks？如果不是，则意味着您正在为每个导航加载整个 html（包括资产）。如果是这种情况，我认为如果您想提高性能，您的首要任务应该是如何只加载一次所有内容（例如使用 turbolinks 或 ajax 应用程序，如 angular）。

标签： javascript jquery ruby-on-rails asset-pipeline

【解决方案1】：

正文结束标记之前和<%= javascript_include_tag 'application' %>之后

添加<%= yield :page_scripts %>

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

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

【讨论】：

【解决方案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>

这将是一个站点范围的更改，因此如果您从 users 控制器转到 index 页面/视图，则正文标记将是：

<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.");
});

【讨论】：

He also gave an updated version of the article 适用于 Rails 4 / 5。
必须在正文中添加javascript标签吗？

【解决方案3】：

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

Installation

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

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

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

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

【讨论】：