我正在尝试获取 Bootstrap Native与Turbolinks 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/