javascript - Ruby on Rails：仅在启用了 turbolinks 的已定义页面中呈现 javascript

Question

我将 javascript 嵌入到使用 Turbolinks 的 Rails 视图中，例如：

ViewX.html.haml：

.blah
  Blah

:javascript
 $(function() {
   $(".blah").offset().top;
 });

加载 ViewX 时一切正常。但是当我导航到查看 YI 时，控制台中出现以下错误：

Uncaught TypeError: Cannot read property 'top' of undefined

当我导航到其他视图时，该错误仍然存​​在。它在执行硬刷新时消失，但在我下次渲染 ViewX 时返回。

我的问题是如何让一些 JS 片段仅针对特定视图呈现而不污染应用程序的其余部分？

编辑

好的，我想出了一个方法，这有点像 hack，但包含 hack。将 ViewX.html.haml 更改为：

ViewX.html.haml：

.blah
  Blah

%script{:type => "text/javascript", 'data-turbolinks-eval' => 'false'}
 :plain
   $(function() {
     $(".blah").offset().top;
   });

Answer 1

一种简单的方法是让每个视图在 body 标记上具有不同的 css 类：

var bodyClass = $('body').attr('class');

switch(bodyClass) {
    case 'home-page':
    // do stuff
    break;

    case 'about-page':
    // do stuff
    break;
}

如果每个页面有很多代码，您可以使用模块模式并将每个模块制作为单独的 .js 文件。

case 'home-page'
  MyModule.initialize(); // set up form validation or whatever you need
break;

另一种选择（如果您不能将 CSS 类添加到 body 标签）是使用一个隐藏<input>标签来保存视图的名称并使用它来切换。

var switchJS = $('input[type=hidden]').attr('data-view');
/* i.e. <input type="hidden" data-view="my-home-page" /> */
switch(switchJS) { ...