[英]Rails 5 - turbolinks 5,some JS not loaded on page render
我有一个 Rails 应用程序,我最近更新到5.0.0.RC1
。 大多数过渡都很顺利,但我在使用新的 Turbolinks 时遇到了一些麻烦。 例如,在我的应用程序中,我使用这个 gem:
gem 'chosen-rails'
我的application.js
文件如下所示:
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require best_in_place
//= require tether
//= require bootstrap
//= require chosen-jquery
//= require_tree .
//= require turbo links
当我单击链接并呈现视图时,我chosen-query
( best_in_place
也不起作用)在初始加载中不起作用,但是如果我对页面进行了硬刷新,则它起作用了。 下面是我得到的结果的图像:
这是我希望它看起来如何的图像:
同样,如果我对页面进行硬刷新,预期的外观会起作用,但不是在常规的redirect_to ...
我的下拉菜单的代码如下所示:
= select_tag :screen, options_from_collection_for_select(@screens, "id", "name"), id: "screen-selection", prompt: "Jump to screen", class: 'form-control chosen-select', style: "max-width: 250px !important"
在redirect_to
它会生成以下 HTML:
<select name="screen" id="screen-selection" class="form-control chosen-select" style="max-width: 250px !important">[...]</select>
...在重新加载硬页面后,我得到了这个:
<select name="screen" id="screen-selection" class="form-control chosen-select" style="max-width: 250px !important; display: none;">[...]</select>
<div class="chosen-container chosen-container-single" style="width: 190px;" title="" id="screen_selection_chosen"><a class="chosen-single"><span>Jump to screen</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off"></div><ul class="chosen-results"><li class="active-result result-selected" data-option-array-index="0" style="">Jump to screen</li><li class="active-result" data-option-array-index="1" style="">tests</li></ul></div></div>
在.coffee
文件中,我尝试像这样初始化chosen
:
# enable chosen js
$('#screen-selection').chosen({
width: '190px'
})
关于我做错了什么的任何想法?
使用 turbolinks,javascript 只加载一次。 在chosen
的硬刷新上,因为整个页面都被重新渲染。 单击链接后,turbolinks 会劫持该请求并将其转换为 ajax 请求(而不是整页刷新)。 一旦请求进来,turbolinks 只会替换页面的body
,让 JS 保持原来的状态。
要解决此问题,您需要像这样将您选择的初始化程序包装在turbolinks:load
事件中
$(document).on('turbolinks:load', function() {
$('#screen-selection').chosen({
width: '190px'
})
})
有关更多信息,请参阅https://github.com/turbolinks/turbolinks#installing-javascript-behavior
这是我使用 Turbolinks 5 和 jQuery 的解决方案:
安装 gem 'jquery-turbolinks'
将此 .coffee 文件添加到您的应用程序: https : //github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee
将其命名为 turbolinks-compatibility.coffee
在 application.js
//=需要jquery
//=需要 jquery_ujs
//=需要 jquery.turbolinks//=需要涡轮链接
//=需要turbolinks-compatibility
我很头疼地想找到一种方法来让我的所有 javascript 工作。 首先,我按照以下视频尝试使用 gem jquery.turbolinks 的解决方案:如何升级到 turbolinks 5但我得到了用于在同一页面中显示图像的灯箱无法正常工作。 因此,在一劳永逸地禁用 Turbolinks 之前,我在github页面上花费了更多时间,然后尝试以下操作:
<div data-turbolinks="false">
<a href="/">Disabled</a>
</div>
您需要将其放在 javascript 需要重新加载页面才能工作的每个链接上。
也许它不是最好的解决方案,但这让我的头痛不那么痛苦。
Turbolinks 和 jquery 有点头疼。 与其在文档就绪时调用操作,在 page:load 上应该工作得更好,因为使用 turbolinks,当您浏览网站时,它不会重新加载整个文档。 像这样的事情可能会奏效:
$(document).on('page:load', function() {
$('#screen-selection').chosen({
width: '190px'
})
}
我试图自己解决这个问题,并找到了一个适合我的解决方案。
我的问题是我有一个带有“引用”功能的论坛以供评论。 使用 turbolinks 5,我得到了几个事件监听器,最后在我的编辑器中得到了来自同一条评论的最多四个引号。
我阅读了幂等性并在这里找到了一个解决方案: How to make jQuery `bind` or `on` event handlers idempotent
我创建了(真的复制了)一个全局函数,我在我的 globals.coffee 文件中使用它来处理事件。
$.fn.event = (name, fn) ->
@unbind(name).bind name, fn
它有效。
我的功能如下所示:
$('.quote').event 'click', (event) ->
do something
这一切都归功于:提供解决方案的Pointy 。
这就是我所做的.. Turbolinks5 以防止多次加载。
var ready = function () {
if ($.turboAlreadyLoaded) {
$('#screen-selection').chosen({
width: '190px'
})
}
$.turboAlreadyLoaded = true;
}
$(document).ready(ready);
$(document).on("turbolinks:load", ready);
我试图自己解决这个问题,并找到了一个适合我的解决方案。 我也希望对其他人有帮助。
(function () {
$('#screen-selection').chosen({
width: '190px'
})
})();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.