个人中心
文章发布
退出
作者热门文章
- iOS/Objective-C 元类和类别
- objective-c - -1001 错误，当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
27
4
我正在尝试获取 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/
27
4
0
我最近在为大学做一些任务，其中包括使用 Turbo Profiler(不幸的是，该软件在任务中隐式声明)来分析 Simpsons 数值积分的 C 和 Pascal 实现。我遇到了一个非常奇怪的案例，怀
“阴极射线管”？ “C 运行时”？两者对我来说都没有多大意义；完全是别的什么？ 最佳答案 你是对的，它是“阴极射线管”。已经是过去式了 :) 2005 年之前最常见的显示类型。 CRT 单元中的大多数
如何在Turbo C++中实现vesa模式？ 最佳答案 我以前是这样做的:你需要实现数据结构和功能，如确定here . 很多 reg.h.al 和东西。 关于turbo-c++ - Turbo C++
我正在使用 Turbo，您可以在这里找到有关它的更多信息:https://www.turbo360.co/docs 我想做的是在创建帖子之前将参数附加到帖子上。在本例中，我尝试附加个人资料。我没有收到
我想问那些有使用 Turbo C++ 3.0 编码经验的人这个问题。 我正在尝试用它制作一个文本用户界面控制台应用程序，我看到 Turbo C++ 3 有一个选项可以在您的程序中链接 Turbo Vi
根据各种消息来源，Rails 7 中表单验证失败的方法是使用状态 422 无法处理的实体进行响应。然而，在我的例子中，这导致 Turbo 发出另一个 GET 请求，这不太可能是预期的结果。 日志如下所
我开始在 Rails 6 中使用 Hotwire 和 Turbo，但遇到 Turbo 无法替换我的 Turbo 框架的问题。我收到以下错误消息:Response has no matching el
在显示类别列表的 View 中，下面有一小部分显示这些类别的“默认”。当用户单击此处时，它会被下拉表单取代，用户可以在其中选择新的默认值。提交表单后，页面的两个部分 - 类别列表以及显示默认值的下部
我使用 Azure Open AI、Langchain 和 Streamlit 构建了一个非常简单的应用程序。以下是我的代码: from dotenv import load_dotenv,find_
我使用 Azure Open AI、Langchain 和 Streamlit 构建了一个非常简单的应用程序。以下是我的代码: from dotenv import load_dotenv,find_
这是 https://github.com/hotwired/turbo-rails/issues/122 的伴侣 复制APP代码:https://github.com/jasonfb/TR001 使
我正在尝试制作在delphi XE7上加密并在PHP端解密的程序 我使用采用 AES 256 加密 CBC 模式的 Lock box 3.6.2。 德尔福XE7代码: Main.pas unit Ma
我是汇编语言的新手，我的代码有问题。起初我尝试了 1 个输入，然后是 1 个输出，它工作得很好。但是当我尝试 2 个输入时。这就是问题出现的时候。当它询问“性别”时，输入 1 和输出 1 似乎重叠了。
我正在按照本教程 ( https://www.turbo360.co/tutorial/audio-streaming-app ) 创建一个音频流网站，该网站允许用户将音乐文件上传到他们的页面。但是，
我有一个表格 Goal Name 我想替换。 作为回复，我发送 303 和“位置:/added_goal”和“/added_
这是网络上的一个常见问题，但我没有找到任何解决我的问题的方法...... 当我单击指向其他页面的链接时，我在所有 Rails 应用程序的控制台中都有相同的警告消息 现在只需要找到解决方案... The
我正在实现 an assemblinker for the 16-bit DCPU来自游戏 0x10c。 有人向我建议的一种技术是使用“覆盖，就像过去在 Turbo Pascal 中一样”，以便在运行
关闭。这个问题是opinion-based .它目前不接受答案。 想改善这个问题吗？更新问题，以便可以通过 editing this post 用事实和引文回答问题. 7年前关闭。 Improve t
我们在 Turbo Pascal 中有一个旧应用程序，它可以将其内部状态保存到文件中，并且我们需要能够在 C# 应用程序中读取/写入该文件。 旧应用程序通过转储各种内存中数据结构来生成文件。在一个地方
我刚刚了解了立交桥涡轮服务及其查询数据的能力。我尝试过以下查询，效果很好: [out:json][timeout:25]; ( node["highway"]({{bbox}}); ); out bo
我是一名优秀的程序员,十分优秀！