在 ruby on rails 4 项目中实现页面特定的 java 脚本和 CSS答案

【问题标题】：Implementing page specific java script and CSS in a ruby on rails 4 project在 ruby on rails 4 项目中实现页面特定的 java 脚本和 CSS
【发布时间】：2016-06-04 20:37:04
【问题描述】：

我的项目有两个页面，每个页面都有不同的 javascript 和 CSS。我也是 ruby on rails 的新手，我有点了解资产管道，但并不完全了解。到目前为止，我尝试过的有几件事没有奏效。

首先是在它自己的文件中创建 javascript，然后在我希望加载该 javascript 的 .html.erb 文件中创建 <head> 标记之间的 javascript 链接标记。除此之外，我在 production.rb 文件中预编译了它们。这不起作用，似乎它们仍然在两个 javascript 文件之间重叠。

我尝试的下一个解决方案是实现jquery-readyselector plugin。这涉及在 application.html.erb 中的 body 上创建一个类，如下所示

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

然后，您将在 application.js 中包含准备好的选择器，最后将您的 javascript 范围限定为该 javascript/coffeescript 文件中的页面。

// app/assets/javascripts/alert.js.coffee

$(".pages.contact").ready ->
  alert "My example alert box."

这个解决方案也不起作用。我不知道我做错了什么，这可能是我忽略的一些简单的事情，因为我是一个 Rails 菜鸟。我想知道是否有人可以就另一种方法给我一些指导，以允许在我的 ruby on rails 项目中使用特定于页面的 javascript 和 CSS。

在我的应用程序下面。{js|css} 文件

application.js
//= require jquery
//= require jquery_ujs
//= require moment
//= require bootstrap-datetimepicker
//= require template
//= require form

application.css
*= require_self
 *= require bootstrap-datetimepicker
 *= require template
 *= requre form
 *= require_tree .

【问题讨论】：

ready 不是元素级事件。怀疑你的 2 个页面构成了大量的 js，并怀疑你在想这个
@charlieftl 这绝对不是大量的 JS，你建议我怎么做？在 page.html.erb 文件中包含
我不是 Rails 开发人员，但我只是建议您可能只需要一个 js 文件，除非您希望网站在未来大幅增长。好处是一旦加载一次，它将进入浏览器缓存以转到其他页面，从而减少下载时间

标签： javascript css ruby-on-rails

【解决方案1】：

有几种不同的方法可以解决这个问题。

默认情况下，在 Rails 项目中，您的 application.js 将被包含在内。

如果您刚刚开始您的项目，您可能会看到它被包含在 app/views/layouts/application.html.erb 中，使用类似 javascript_include_tag 'application' 的名称

根据你的页面特定文件有多少 JS，你可以在 application.js 中要求它，但如果你想提供完全不同的 JS，你可以在上面提到的布局文件中做这样的事情：

<% if content_for?(:page_script_tags) %>
  <%= yield(:page_script_tags) %>
<% else %>
  <%= javascript_include_tag('application') %>
<% end %>

然后在你想要自定义 JS 的任何页面的 HTML 中，你可以这样做：

<% content_for(:page_script_tags, javascript_include_tag('path/to/your/js/file.js') %>

如果您只想更改您的 JS 使其仅在特定页面上执行，您可以将您的 JS 更新为：

jQuery ->
  if ($(".pages.contact").length) 
    alert "My example alert box."

让我知道这是否有意义！

【讨论】：

您可以在此处阅读有关 content_for 和其他布局助手的信息：guides.rubyonrails.org/layouts_and_rendering.html
这似乎有道理，但 :page_script_tags 是什么？会不会类似于class="<%= controller_name %> <%= action_name %>
不，这只是一个随机名称，将yield 调用与content_for 调用联系起来。你可以随便叫它。
另外，我会在 application.js 文件中做什么？我需要 require tree 吗？还是我不想这样做，因为这不是将所有 JS 文件连接在一起吗？
是的，如果您使用require_tree .，它将需要所有文件，因此最好只包含您需要的文件。 require_tree . 可能有点危险，因为并不总是清楚你的内容。