Rails视图中的Javascript问题 [英] issue with Javascript in Rails View
问题描述
在我的Rails View模板中，我使用一些jQuery来实现选项卡式面板功能:
In my Rails View template, I'm using some jQuery for tabbed panels functionality:
<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模板中也使用了此脚本，并且希望更好地组织Java脚本，因此我在app/assets/javascripts下创建了一个Javascript文件(tabbed_panels.js)，并将上述脚本移至了tabbed_panels.js文件.
Because I'm also using this script in other View templates, and I want to organize my Javascript a bit better, I created a Javascript file (tabbed_panels.js) under app/assets/javascripts and moved the above script to the tabbed_panels.js file.
但是，现在我页面上的面板在第一次加载页面时就没有内容了.只有刷新页面后，面板才会加载内容.
However now the panels on my page have no content the first time the page is loaded. Only when the page is refreshed, the panels get loaded with content.
有人知道发生了什么以及如何解决这个问题，所以我的选项卡式面板在第一页加载时就有内容了吗?
Does someone have an idea what's going on and how this can be solved, so my tabbed panels have content at the first page load?
感谢您的帮助，
安东尼
推荐答案
涡轮链接
您可能遇到的问题是，您正在尝试在运行Turbolink的情况下加载$(document).ready函数.
The likely issue you have will be that you're trying to load the $(document).ready function with Turbolinks running.
这根本行不通(如果您使用的是Turbolinks)，因为Turbolinks仅刷新页面的<body>标记，因此通常会阻止JS绑定到 DOM ，因为尚未重新加载JS
This simply won't work (if you're using Turbolinks), as since Turbolinks refreshes only the <body> tag of your page, it will typically prevent your JS from binding to the various elements in the DOM, as the JS has not been reloaded
解决此问题的方法是围绕 Turbo链接开发JS(使用 Turbolinks '事件处理程序):
The way to fix this is to develop your JS around Turbolinks (using 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是否正在运行.
This should allow your tabs to be populated on page load, regardless of whether Turbolinks is operating or not.
-
不引人注目的JS
要考虑的其他事情(您已经做过了)，是您确实需要使用应用程序中的JavaScript .
Something else to consider (you've already done this), is that you really need to use unobtrusive javascript in your application.
不引人注目的JS基本上意味着您能够将页面中的绑定"抽象到资产管道中的Javascript文件.造成这种情况的几个重要原因:
Unobtrusive JS basically means that you're able to abstract your "bindings" from your page to your Javascript files in the asset pipeline. There are several important reasons for this:
- 您的JS可以加载到您想要的任何页面上(DRY)
- 您的JS将驻留在您应用的后端"(不会污染视图)
- 您将能够使用JS填充屏幕上所需的各种元素/对象
- Your JS can be loaded on any page you want (it's DRY)
- Your JS will reside in the "backend" of your app (won't pollute views)
- You'll be able to use the JS to populate the various elements / objects you want on screen
总是建议您将JS放入单独的文件中-包括视图中的代码，这样一来您就可以大幅度地搞乱
It's always recommended you put your JS into separate files - including in the views sets you up for a big mess down the line
这篇关于Rails视图中的Javascript问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
