javascript - 如何在 Rails 应用程序上有效地限定 javascript set css 的范围？

在我的 Rails 应用程序上确定我的 javascript 和 css 文件的范围时遇到了很多麻烦。通过范围界定，我的意思是:

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

我尝试了一些解决方案，但它们都很复杂且不够优雅:

我看到了一些这样的建议:像这样将我的 .js 文件直接包含在我的 .erb 文件中:
```
<% content_for :head do %>
  <script type="text/javascript">
<% end %>
```
然后在应用程序布局中生成它。但这意味着再向服务器发出一个请求以获取 .js 文件。我认为为应用程序保留一个 .js 文件和一个 .css 文件很重要，它们由 Assets 管道
我看到了一些其他建议，例如测试我的 HTML 标记是否出现在带有 .length 的 DOM 上jquery的方法。这仍然意味着在每个页面上测试是否存在特定标记(知道它只会出现在一个或两个页面中)。

我找到了一个易于实现的解决方案，而且在我看来非常优雅。

最佳答案

要求:

在你的应用程序中改变布局

<body>

到

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

正文的每一页都有不同的类。例如，在一个带有 article_controller 和此 Controller 上的 index 操作的博客应用程序中，正文将是:

<body class='article_index'>

CSS 作用域几乎是立竿见影的。如果你有一些只需要在特定页面上呈现的样式(比如 article#index)，你只需要在你的 SCSS 文件中做广告:

body.article_index {
# CSS STYLE HERE
}

你不需要到处添加很长的类名。

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

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

此插件的另一个优点是它可以与 turbolink 一起使用。

Here你可以看到我之前关于 turbolink 的问题之一。为了让我的 java 脚本在页面加载和页面更改时工作，有人向我提出了这样的建议:

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

但有时(在加载的第一个页面上)，函数被执行了两次(一次用于ready，一次用于page:change) ，现在我只是像这样使用 jquery-readyselector :

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

并且该函数将在每个场景中执行一次。

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

关于javascript - 如何在 Rails 应用程序上有效地限定 javascript set css 的范围？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24719607/