Rails 视图中的 Javascript 问题答案

【问题标题】：issue with Javascript in Rails ViewRails 视图中的 Javascript 问题
【发布时间】：2014-08-11 08:46:49
【问题描述】：

在我的 Rails 视图模板中，我使用一些 jQuery 来实现选项卡式面板功能：

<section>
... content ommitted
</section>
<script>
$(document).ready(function () {
  $('.accordion-tabs-minimal').each(function(index) {
     $(this).children('li').first().children('a').addClass('is-active').next().addClass('is-open').show();
  });

  $('.accordion-tabs-minimal').on('click', 'li > a', function(event) {
     if (!$(this).hasClass('is-active')) {
      event.preventDefault();
      var accordionTabs = $(this).closest('.accordion-tabs-minimal')
      accordionTabs.find('.is-open').removeClass('is-open').hide();

      $(this).next().toggleClass('is-open').toggle();
      accordionTabs.find('.is-active').removeClass('is-active');
      $(this).addClass('is-active');
     } else {
      event.preventDefault();
    }
  });
});
</script>

因为我也在其他 View 模板中使用了这个脚本，并且我想更好地组织我的 Javascript，所以我在 app/assets/javascripts 下创建了一个 Javascript 文件 (tabbed_panels.js) 并将上面的脚本移动到tabbed_panels.js 文件。

但是现在我页面上的面板在第一次加载页面时没有内容。只有当页面刷新时，面板才会加载内容。

是否有人知道发生了什么以及如何解决这个问题，所以我的选项卡式面板在第一页加载时就有内容？

感谢您的帮助，

安东尼

【问题讨论】：

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

【解决方案1】：

Turbolinks

您可能遇到的问题是您尝试在 Turbolinks 运行的情况下加载 $(document).ready 函数。

这根本行不通（如果您使用的是 Turbolinks），因为 Turbolinks 仅刷新页面的 <body> 标签，它通常会阻止您的 JS 绑定到 DOM 中的各种元素，由于 JS 尚未重新加载

解决这个问题的方法是开发你的JS 围绕 Turbolinks（使用Turbolinks' event handlers）：

#app/assets/javascripts/tabbed_panels.js
var new_items = function() {
  $('.accordion-tabs-minimal').each(function(index) {
     $(this).children('li').first().children('a').addClass('is-active').next().addClass('is-open').show();
  });

  $(document).on('click', '.accordion-tabs-minimal li > a', function(event) {
     if (!$(this).hasClass('is-active')) {
      event.preventDefault();
      var accordionTabs = $(this).closest('.accordion-tabs-minimal')
      accordionTabs.find('.is-open').removeClass('is-open').hide();

      $(this).next().toggleClass('is-open').toggle();
      accordionTabs.find('.is-active').removeClass('is-active');
      $(this).addClass('is-active');
     } else {
      event.preventDefault();
    }
  });
});

$(document).on("page:load ready", new_items);

这应该允许在页面加载时填充您的标签，无论 Turbolinks 是否正在运行。

不显眼的 JS

还有一点需要考虑（您已经这样做了），您真的需要在您的应用程序中使用unobtrusive javascript。

Unobtrusive JS 基本上意味着您能够将页面中的“绑定”抽象到资产管道中的 Javascript 文件中。这有几个重要的原因：

您的 JS 可以加载到您想要的任何页面上（它是 DRY）

您的 JS 将驻留在应用的“后端”中（不会污染视图）

您将能够使用 JS 在屏幕上填充所需的各种元素/对象

总是建议您将 JS 放入单独的文件中 - 包括在视图中，这会让您在下线变得一团糟

【讨论】：

嗨 Rich，感谢您的详细解释。我添加了行 $(document).on("page:load ready", new_items);到我的 tabbed_panels.js 文件，但它没有解决问题。第一次加载页面时，我的标签面板仍然没有加载。只有在我刷新页面时才会加载面板。
哎呀，我的错，我只复制了 $(document).on("page:load ready", new_items);并没有注意到脚本的其余部分也有一些变化。但是它仍然无法正常工作。当我在 Chrome 中检查控制台时，我收到此错误：Uncaught SyntaxError: Unexpected token ILLEGAL
好的，问题已解决，')' 太多，脚本正在运行，非常感谢。
这里有一个类似的问题和辩论关于它是如何工作的stackoverflow.com/questions/41336325/…
我猜用户决定删除他们在链接主题中的答案和随后的对话。