gpt4 book ai didi

javascript - Bootstrap Native 不适用于 Turbo Links

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:58:48 27 4
gpt4 key购买 nike

我正在尝试获取 Bootstrap NativeTurbolinks 5一起工作在 Rails 5 应用程序中。当我第一次加载页面时,Bootstrap 下拉菜单工作正常,但在导航到另一个页面后,Bootstrap 下拉菜单不再工作。就好像 Bootstrap 的事件监听器断开连接一样。

我已经看到几个关于 Bootstrap 的 jQuery 实现的问题,但是,我对使用 Bootstrap Native 很感兴趣。并从我的 JS 堆栈中删除 jQuery。

这里有一些细节:

application.js

# app/assets/javascript/application.js
//= require turbolinks
//= require rails-ujs
//= require polyfill
//= require bootstrap-native

应用布局

# views/layout/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<%= yield %>
</div>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload', 'data-turbolinks-eval': 'false' %>
</body>
</html>

bootstrap-native这是Bootstrap Native package .

从我的 Javascript 标签中删除 'data-turbolinks-eval': 'false',从而在每个 Turbolink 导航上重新评估应用程序的所有 Javascript,确实解决了 Bootstrap Native 问题,但是它但它会导致 rails-ujs 抛出异常。

关于如何解决这个问题有什么想法吗?

最佳答案

这里是 BSN 开发人员,考虑为什么不将此自定义代码添加到 BSN 库之外,以便于维护?

var container = document.getElementById('myContainer');
document.addEventListener('turbolinks:load', function(){
container = container || document.getElementById('myContainer');
Array.prototype.forEach.call(container.querySelectorAll('[data-spy="affix"]'), function(element){ new Affix(element) });
Array.prototype.forEach.call(container.querySelectorAll('[data-dismiss="alert"]'), function(element){ new Alert(element) });
Array.prototype.forEach.call(container.querySelectorAll('[data-toggle="buttons"]'), function(element){ new Button(element) });
Array.prototype.forEach.call(container.querySelectorAll('[data-ride="carousel"]'), function(element){ new Carousel(element) });
Array.prototype.forEach.call(container.querySelectorAll('[data-toggle="collapse"]'), function(element){ new Collapse(element) });
Array.prototype.forEach.call(container.querySelectorAll('[data-toggle="dropdown"]'), function(element){ new Dropdown(element) });
Array.prototype.forEach.call(container.querySelectorAll('[data-toggle="modal"]'), function(element){ new Modal(element) });
Array.prototype.forEach.call(container.querySelectorAll('[data-toggle="popover"]'), function(element){ new Popover(element) });
Array.prototype.forEach.call(container.querySelectorAll('[data-spy="scroll"]'), function(element){ new ScrollSpy(element) });
Array.prototype.forEach.call(container.querySelectorAll('[data-toggle="tab"]'), function(element){ new Tab(element) });
Array.prototype.forEach.call(container.querySelectorAll('[data-toggle="tooltip"]'), function(element){ new Tooltip(element) });
},false);

您应该只查看特定的容器 turbolinks 更新,因为您不会更新任何其他内容,并且您需要尽快更新。

我还更新了 wiki page包含一个通用示例。

更新从 BSN 版本 2.0.20 开始,您可以在您的站点中使用该库 <head>无需任何额外的脚本,您可以做到这一点 turbolinks更容易:

var container = document.getElementById('myContainer');
document.addEventListener('turbolinks:load', function(){
container = container || document.getElementById('myContainer');
BSN.initCallback(container);
}, false);

如果您输入 BSN在您的控制台中按 Enter,您将获得以下对象:

BSN = {
version: '2.0.20',
initCallback: function(lookup){},
supports: [ /* an array with supported components */ ]
}

请记住,您不必使用 myContainer作为 turbolinks 目标的 ID 属性,您可以使用任何东西使该元素独一无二,我建议使用像 data-function="turbolinks-autoload" 这样的选择器.

下载最新的母版并试一试。

关于javascript - Bootstrap Native 不适用于 Turbo Links,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46857297/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com