代码之家 › 专栏 › 技术社区 › Toontje

Rails视图中的Javascript问题

asset-pipeline ruby-on-rails jquery javascript

Toontje · 技术社区 · 10 年前

在我的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>

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

然而,现在我的页面上的面板在第一次加载页面时没有内容。只有在刷新页面时,面板才会加载内容。

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

谢谢你的帮助,

安东尼

1 回复 | 直到 10 年前

Richard Peck 10 年前

涡轮连杆

您可能遇到的问题是您试图加载 $(document).ready Turbolink运行时的功能。

这根本不起作用(如果您使用的是Turbolink),因为Turbolink只刷新 <body> 标记,它通常会阻止JS绑定到 DOM ,因为尚未重新加载JS

解决这个问题的方法是开发JS 围绕涡轮连杆(使用 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);

这应该允许在页面加载时填充选项卡,无论Turbolink是否运行。

无障碍JS

还有一件事需要考虑(你已经这么做了),那就是你 真正地 需要使用 unobtrusive javascript 在您的应用程序中。

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

你的JS可以加载到你想要的任何页面上(它是干燥的)

您的JS将驻留在应用程序的“后端”(不会污染视图)

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

它是总是建议您将JS放到单独的文件中-包括在视图中,这会让您陷入一场混乱