如何在rails appliacation上高效地使用javascript和css？

Question

我在我的rails应用程序上调整我的javascript和css文件有很多麻烦.通过范围界定,我的意思是:

如何处理仅在一个页面或一个控制器中使用的java脚本和CSS？

我尝试了一些解决方案,但它们都很复杂而且不那么优雅:

我看到了一些像这样的建议:直接在我的.erb文件中包含我的.js文件,如下所示:
```
<% content_for :head do %>
  <script type="text/javascript">
<% end %>
```
Run Code Online (Sandbox Code Playgroud)
然后在应用程序布局中产生它.但这意味着再向服务器发出一个请求以获取.js文件.我认为只保留一个.js文件和一个由资产管道创建的应用程序的.css文件很重要
我看到了一些其他的建议,比如测试我的HTML标签是否存在于DOM上,使用jquery 的.length方法.如果存在特定标签,则仍然意味着在每个页面上进行测试(知道它将仅存在于一页或两页中).

我找到了一个易于实现的解决方案,在我看来,它很优雅.

Answer 1

要求:

在您的应用程序布局更改

<body>

至

<body class="#{controller_name}_#{action_name}">

每个页面的正文都有不同的类.例如,在具有article_controller和此控制器上的索引操作的博客应用程序上,正文将是:

<body class='article_index'>

CSS范围几乎是即时的.如果你有一些只需要在某个页面上呈现的样式(让我们说文章 #index),你只需要在你的SCSS文件中做广告:

body.article_index {
# CSS STYLE HERE
}

您无需在任何地方添加非常长的类名.

您需要下载jquery-readyselector.此插件扩展.ready()为页面特定的脚本提供了一个很好的语法:

$('.article_index').ready(function () {
    alert("I'm on article#index !");
});

关于这个插件的另一个好处是它正在使用turbolink.

在这里你可以看到我之前关于turbolink的一个问题.为了让我的java脚本在页面加载和页面更改上工作,有人向我提出类似的东西:

// accommodate Turbolinks
$(document).on('ready page:change', function() {
// STUFF
});

但有时(在第一页加载),该函数执行了两次(一个用于ready,一个用于page:change),现在我只使用jquery-readyselector,如下所示:

// accommodate Turbolinks
$('nav.nav').ready(function() {
// STUFF
});

并且该功能将在每个场景中执行一次.

我希望这会对某人有所帮助.